关于 webpack sass-loader 的url问题

clipboard.png
简单截取了下webpack的某个modules配置,我项目中用到了sass,然后用sass-loader来加载和编译scss文件,但是貌似不会自动识别sass里面的url路径,类似
clipboard.png
所以在打包后通过调试会发现无法引用到图片,这个问题是如何解决的?

阅读 8.3k
4 个回答

已解决,把raw-loader换成css-to-string-loader

你这个的路径是相对于你scss文件的路径吗?
方便点的做法可以把img文件夹resolve里设定。

这个问题也折腾了我半天,其实在url后加引号,把路径围起来就可以了。

background:#fff url('../../dist/img/home.png');
loaders: [
            {
                test: /(\.jsx|\.js)$/,
                loader: 'babel?presets[]=es2015&presets[]=react',
                //loader: 'babel?presets[]=stage-2&presets[]=es2015&presets[]=react',
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass'],
            },
            {
                test: /\.less$/,
                loaders: ['style', 'css', 'less'],
            },
            {
                test: /\.css$/,
                loaders: ['style', 'css'],
            },
            {
                test: /\.json$/,
                loader: 'json',
            },
            // {
            //     test: /\.(png|jpg)$/,
            //     loader: 'file-loader'
            // }
        ],
推荐问题
宣传栏