Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

sass - Webpack: cannot resolve module 'file-loader'

When I try to build SASS file with webpack, I got the following error:

Module not found: Error:Cannot resolve module 'file-loader'

note that this issue only happen when i try to load background image using relative path.

this Work fine:

  background:url(http://localhost:8080/images/magnifier.png);

this cause the issue:

   background:url(../images/magnifier.png);

and this is my project structure

  • images
  • styles
  • webpack.config.js

and this is my webpack file:

var path = require('path');
module.exports = {
    entry: {
        build: [
            './scripts/app.jsx',
            'webpack-dev-server/client?http://localhost:8080',
            'webpack/hot/only-dev-server'
        ]
    },
    output: {
        path: path.join(__dirname, 'public'),
        publicPath: 'http://localhost:8080/',
        filename: 'public/[name].js'
    },
    module: {
        loaders: [
            {test: /.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/},
            {test: /.scss$/, loaders: ['style', 'css', 'sass']},
            {test: /.(png|jpg)$/, loader: 'file-loader'},
            {test: /.(ttf|eot|svg|woff(2)?)(?[a-z0-9]+)?$/, loader: 'file-loader'}
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.scss', '.eot', '.ttf', '.svg', '.woff'],
        modulesDirectories: ['node_modules', 'scripts', 'images', 'fonts']
    }
};
question from:https://stackoverflow.com/questions/34352929/webpack-cannot-resolve-module-file-loader

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

As @silvenon said in his comment:

Do you have file-loader installed?

yes file-loader was installed but broken, and my issue has been solved by re-installing it.

npm install --save-dev file-loader


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...