1

我正在使用最新的一切。

我正在将 SASS 转换为 CSS 并引用图像：

body{
  background: url("../images/ugly-car.jpg");
}

图像根据我的设置进行更改，但是在 Webpack 执行此操作后路径不正确...

生成的 CSS 是：

body{background:url(static/media/ugly-car.147a1cf5.jpg)}

但它必须是：

body{background:url(../static/media/ugly-car.147a1cf5.jpg)}

我在这里走到了尽头，尝试了我能想到的一切......

这是一个示例仓库： https ://github.com/joacim-boive/webpack-setup/tree/labb1

我来自 repo 的 webpack.config.js 文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (env = {}) => {
    return {
        entry: ['./src/js/index.js', './src/css/sass/all.scss'],
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'js/bundle.[name].[hash:8].js',
            // publicPath: '/'
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    // If you are having trouble with urls not resolving add this setting.
                                    // See https://github.com/webpack-contrib/css-loader#url
                                    url: true,
                                    minimize: true,
                                    sourceMap: true
                                }
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    sourceMap: true
                                }
                            }
                        ]
                    })
                },
                {
                    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: 'static/media/[name].[hash:8].[ext]',
                    },
                },
            ]
        },
        plugins: [
            new ExtractTextPlugin('css/bundle.style.[hash:8].css', {
                allChunks: true
            }),
            new HtmlWebpackPlugin({
                inject: true,
                template: 'src/index.ejs',
            }),
        ]
    }
};
4

0 回答 0