关于 webpack sass-loader 的url问题

Question

简单截取了下webpack的某个modules配置，我项目中用到了sass，然后用sass-loader来加载和编译scss文件，但是貌似不会自动识别sass里面的url路径，类似

所以在打包后通过调试会发现无法引用到图片，这个问题是如何解决的？

Answer 1

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

Answer 2

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

Answer 3

这个问题也折腾了我半天，其实在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'
            // }
        ],

Answer 4

使用url-relative-loader重写url()，然后相对地址应用自己需要的资源文件。
出处sass-loader