如何在使用webpack sass-loader时保留原始url()

时间:2016-05-12 18:07:50

标签: webpack

有没有办法让我的原始图像/目录结构保留在SASS文件的webpack过程之后。我不想散列图像或内联它们。我希望URL()看起来与它们完全一样,相对于sass文件如此:../ images / *

原始SCSS:

 background: url(../images/icon.gif);

webpack config:

{ test: /\.css$/,  loader: 'raw-loader' },
{ test: /\.scss$/,  loader: ExtractTextPlugin.extract('css!resolve-url!sass?sourceMap') },
{ test: /\.(png|gif|bmp)$/,  loader: "file-loader",  query: "name=[path][name].[ext]"            } 
                                        can anything be done here ^^^^^ to make it original path

输出:

background:url(src/images/icons/icon.gif) 

1 个答案:

答案 0 :(得分:4)

使用 https://github.com/bholloway/resolve-url-loader

        {
            test   : /\.css$/,
            loaders: ['style-loader', 'css-loader?url=false']
        }, {
            test   : /\.scss$/,
            loaders: ['style-loader', 'css-loader?url=false' , 'sass-loader?sourceMap']
        }

并使用复制图像 新的CopyWebpackPlugin https://github.com/kevlened/copy-webpack-plugin