SaeedPrez's avatar

Webpack error when trying to import CSS

Hey guys,

I ran npm install materialize-css --save-dev and then in a brand new Laravel 5.4 project, in the /resources/assets/sass/app.scss I have nothing but the following line..

@import "node_modules/materialize-css/sass/materialize"

I even tried all these variants..

@import "node_modules/materialize-css/sass/materialize.scss"
@import "node_modules/materialize-css/sass"
@import "node_modules/materialize-css"
@import "materialize-css"

I run node v7.5.0 and npm v4.1.2 on Windows 10.

I get this error when I run npm run watch

 ERROR  Failed to compile with 3 errors                                                                                                                                   
                                                                                                                                                                          
 error  in ./resources/assets/sass/app.scss                                                                                                                               
                                                                                                                                                                          
Module build failed: Error                                                                                                                                                
    at factoryCallback (Z:\Work\.LaragonRoot\Manager\node_modules\webpack\lib\Compilation.js:259:39)                                                                      
    at Z:\Work\.LaragonRoot\Manager\node_modules\webpack\lib\NormalModuleFactory.js:234:19                                                                                
    at onDoneResolving (Z:\Work\.LaragonRoot\Manager\node_modules\webpack\lib\NormalModuleFactory.js:59:20)                                                               
    at Z:\Work\.LaragonRoot\Manager\node_modules\webpack\lib\NormalModuleFactory.js:126:20                                                                                
    at Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:3694:9                                                                                               
    at Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:356:16                                                                                               
    at iteratorCallback (Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:934:13)                                                                            
    at Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:840:16                                                                                               
    at Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:3691:13                                                                                              
    at apply (Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:21:25)                                                                                        
    at Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:56:12                                                                                                
    at Z:\Work\.LaragonRoot\Manager\node_modules\webpack\lib\NormalModuleFactory.js:121:22                                                                                
    at onResolved (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:70:11)                                                                      
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at afterInnerCallback (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:138:10)                                                             
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at Resolver.applyPluginsAsyncSeriesBailResult1 (Z:\Work\.LaragonRoot\Manager\node_modules\tapable\lib\Tapable.js:181:46)                                              
    at innerCallback (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:125:19)                                                                  
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at Z:\Work\.LaragonRoot\Manager\node_modules\tapable\lib\Tapable.js:283:15                                                                                            
    at Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:38:4                                                                           
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at afterInnerCallback (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:138:10)                                                             
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at Resolver.applyPluginsAsyncSeriesBailResult1 (Z:\Work\.LaragonRoot\Manager\node_modules\tapable\lib\Tapable.js:181:46)                                              
    at innerCallback (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:125:19)                                                                  
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at Z:\Work\.LaragonRoot\Manager\node_modules\tapable\lib\Tapable.js:283:15                                                                                            
    at innerCallback (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:123:11)                                                                  
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
                                                                                                                                                                          
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss                                                                                                    
                                                                                                                                                                          
 error  in ./resources/assets/sass/app.scss                                                                                                                               
                                                                                                                                                                          
Module build failed: Error                                                                                                                                                
    at factoryCallback (Z:\Work\.LaragonRoot\Manager\node_modules\webpack\lib\Compilation.js:259:39)                                                                      
    at Z:\Work\.LaragonRoot\Manager\node_modules\webpack\lib\NormalModuleFactory.js:234:19                                                                                
    at onDoneResolving (Z:\Work\.LaragonRoot\Manager\node_modules\webpack\lib\NormalModuleFactory.js:59:20)                                                               
    at Z:\Work\.LaragonRoot\Manager\node_modules\webpack\lib\NormalModuleFactory.js:126:20                                                                                
    at Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:3694:9                                                                                               
    at Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:356:16                                                                                               
    at iteratorCallback (Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:934:13)                                                                            
    at Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:840:16                                                                                               
    at Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:3691:13                                                                                              
    at apply (Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:21:25)                                                                                        
    at Z:\Work\.LaragonRoot\Manager\node_modules\async\dist\async.js:56:12                                                                                                
    at Z:\Work\.LaragonRoot\Manager\node_modules\webpack\lib\NormalModuleFactory.js:121:22                                                                                
    at onResolved (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:70:11)                                                                      
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at afterInnerCallback (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:138:10)                                                             
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at Resolver.applyPluginsAsyncSeriesBailResult1 (Z:\Work\.LaragonRoot\Manager\node_modules\tapable\lib\Tapable.js:181:46)                                              
    at innerCallback (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:125:19)                                                                  
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at Z:\Work\.LaragonRoot\Manager\node_modules\tapable\lib\Tapable.js:283:15                                                                                            
    at Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:38:4                                                                           
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at afterInnerCallback (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:138:10)                                                             
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at Resolver.applyPluginsAsyncSeriesBailResult1 (Z:\Work\.LaragonRoot\Manager\node_modules\tapable\lib\Tapable.js:181:46)                                              
    at innerCallback (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:125:19)                                                                  
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
    at Z:\Work\.LaragonRoot\Manager\node_modules\tapable\lib\Tapable.js:283:15                                                                                            
    at innerCallback (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\Resolver.js:123:11)                                                                  
    at loggingCallbackWrapper (Z:\Work\.LaragonRoot\Manager\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)                                               
                                                                                                                                                                          
 error                                                                                                                                                                    
                                                                                                                                                                          
Z:\Work\.LaragonRoot\Manager\node_modules\extract-text-webpack-plugin\loader.js??ref--5-0!Z:\Work\.LaragonRoot\Manager\node_modules\style-loader\index.js!Z:\Work\.Laragon
Root\Manager\node_modules\css-loader\index.js!Z:\Work\.LaragonRoot\Manager\node_modules\postcss-loader\index.js!Z:\Work\.LaragonRoot\Manager\node_modules\resolve-url-load
er\index.js!Z:\Work\.LaragonRoot\Manager\node_modules\sass-loader\index.js??ref--5-5!Z:\Work\.LaragonRoot\Manager\resources\assets\sass\app.scss doesn't export content
0 likes
6 replies
SaeedPrez's avatar

When I run npm run dev I get a different error..

The default configuration seemed to copy the Bootstrap fonts automatically without there being a .copy() in the webpack.mix.js

 ERROR  Failed to compile with 20 errors

These dependencies were not found in node_modules:

* ../fonts/roboto/Roboto-Thin.eot
* ../fonts/roboto/Roboto-Thin.woff2
* ../fonts/roboto/Roboto-Thin.woff
* ../fonts/roboto/Roboto-Thin.ttf
* ../fonts/roboto/Roboto-Light.eot
* ../fonts/roboto/Roboto-Light.woff2
* ../fonts/roboto/Roboto-Light.woff
* ../fonts/roboto/Roboto-Light.ttf
* ../fonts/roboto/Roboto-Regular.eot
* ../fonts/roboto/Roboto-Regular.woff2
* ../fonts/roboto/Roboto-Regular.woff
* ../fonts/roboto/Roboto-Regular.ttf
* ../fonts/roboto/Roboto-Medium.eot
* ../fonts/roboto/Roboto-Medium.woff2
* ../fonts/roboto/Roboto-Medium.woff
* ../fonts/roboto/Roboto-Medium.ttf
* ../fonts/roboto/Roboto-Bold.eot
* ../fonts/roboto/Roboto-Bold.woff2
* ../fonts/roboto/Roboto-Bold.woff
* ../fonts/roboto/Roboto-Bold.ttf

Did you forget to run npm install --save for them?                                                                                                                       Asset      Size  Chunks                    Chunk Names
       /js/app.js    1.3 MB       0  [emitted]  [big]  /js/app
mix-manifest.json  32 bytes          [emitted]

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Saeed\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script 'node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     Z:\Work\.LaragonRoot\Manager\npm-debug.log
ejdelmonico's avatar

You can "require" css or scss when using webpack 2.2 if you want. Just add this to the loaders...

  • npm install sass-loader, css-loader and style-loader
  • ad the following to webpack.config:
module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
...
SaeedPrez's avatar

@ejdelmonico thank you for your reply, after wasting hours on this I finally uninstalled Mix and installed Elixir and everything (incl browsersync) was up and working in minutes and without pulling my hair out.

I don't understand why they switched to Mix when Elixir was working so great. Mix seems to be a configuration hell with error messages that make zero sense.

olyckne's avatar
olyckne
9 years ago
Best Answer
Level 38

Unfortunately npm run watch gives a terrible error message. npm run dev tells you it can't find the fonts.

If you put $roboto-font-path: "~materialize-css/fonts/roboto/"; somwhere, preferably in the _variables.scss, it should work.

shoognight's avatar

i think that add in the app.scss file this query:

$roboto-font-path: "~/node_modules/materialize-css/fonts/roboto/" !default;
// Materialize
@import "node_modules/materialize-css/sass/materialize";

but i find a solutions better

before: npm install --save-dev materialize-sass

and add in app.scss:


// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
// Variables
@import "variables";




$roboto-font-path: "~materialize-sass/font/roboto/";
$icons-font-path: "~materialize-sass/font/material-design-icons/";
@import "~materialize-sass/sass/materialize.scss";

webconfigpack

mix.webpackConfig({

    module: {
        loaders: [
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                loader: 'file',

            },
        ]
    }
});
mix.copy('node_modules/animate.css/animate.css', 'public/css')
    .copy('node_modules/materialize-css/dist/js/', 'public/js')
    .copy('node_modules/materialize-css/fonts/', 'public/fonts')
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

mix.version();

Please or to participate in this conversation.