Can't import css from node_modules/
See original GitHub issue- Laravel Mix Version: 0.8.1
- Node Version (node -v): v6.9.5
- NPM Version (npm -v): 4.2.0
- OS: OSX Yosemite 10.10.5
Description:
Can’t import css from a node_module
Steps To Reproduce:
laravel new test-project
npm install
npm install jquery.filer --save-dev
Replace everything in the resources/assets/sass/app.scss with:
@import "node_modules/jquery.filer/css/jquery.filer.css";
npm run dev
Comes back with:
This dependency was not found in node_modules:
* -!./../../../node_modules/css-loader/index.js!../assets/fonts/jquery.filer-icons/jquery-filer.css
Did you forget to run npm install --save for it?
This is caused by the imported css file above, which is also importing relatively another css file:
@import url('../assets/fonts/jquery.filer-icons/jquery-filer.css');
Replacing it with the line below does the trick but changing node_module/ files is not recommended.
@import url('../../../node_modules/jquery.filer/assets/fonts/jquery.filer-icons/jquery-filer.css');
Is there a way to get the same result by tweaking webpack’s configuration?
As always, can’t thank you enough for all your hard work Jeffrey!
Issue Analytics
- State:
- Created 7 years ago
- Comments:6 (1 by maintainers)
Top Results From Across the Web
Import CSS from "node_modules" in Webpack - Stack Overflow
For example, I'm using the third-party react-select module, but I can't import its CSS file from node_modules :
Read more >How do I import a CSS file from node_modules? #3034 - GitHub
In your app.css you should be able to use: @import '~semantic-ui-css';. That's not even a CSS stylesheet.
Read more >Import css file from node_modules to resources/assets/css
What I'd do is first copy over any resource you need from npm_modules or bower_components to resources/assets. This way, you can .gitignore those...
Read more >How do *.css in node_modules get loaded?
You can import css files using SASS imports in your main application.scss file and reference the css files inside the node module.
Read more >Basic Features: Built-in CSS Support - Next.js
Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application. For global stylesheets, like bootstrap or nprogress ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@kyrpas Can you try updating your app.scss file to be:
And then re-run
npm run dev
.Yeah, there’s a lot to learn. The tilde tells Webpack that we’re not looking for that
jquery.filer.css
file relatively toapp.scss
. Instead, we want to look withinnode_modules
.Don’t forget that, if you do just want to concatenate scripts, you still can with Mix. Sometimes, that’s the easiest option for basic or older projects.
Or, if you still want to use the ES2015 syntax, just change that call the
mix.babel()
, and it’ll compile everything down as well.