sass - Webpack 文件加载器重复的公共(public)路径

Question

我正在使用 url-loader和 file-loader打包我的 sass 文件，但图像 url 有问题。

我试过使用 resolve.alias在应用程序的根目录中为我的图像目录设置别名，以便我可以使用 url(~images/myimage.png)在我的 sass 文件中 - 这适用于 url-loader , 但如果图像是由 file-loader 拾取的它们以重复的公共(public)路径输出，即 dist/dist/[hash].png - 无论我使用 ~ 都是这种情况或相对路径。如果我使用图像的绝对路径，它会起作用，但如果我的应用程序安装在子目录下，它就会中断。

目录结构:

- images/
- js/
- styles/
- webpack.config.js

网络包配置:

module.exports = {
    entry: {
        app: './js/bootstrap'
    },

    output: {
        filename: 'bundle.js',
        path: 'dist',
        publicPath: 'dist/'
    },

    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: ExtractPlugin.extract('style', 'css!sass')
            },
            {
                test: /\.(gif|png|svg|jpe?g)$/i,
                loader: 'url',
                query: {
                    limit: 1000
                }
            }
        ]
    },

    resolve: {
        // add alias for application code directory
        alias:{
            js: path.resolve(__dirname, 'js'),
            styles: path.resolve(__dirname, 'styles'),
            images: path.resolve(__dirname, 'images')
        },
        extensions: ['', '.js', '.scss', '.png', '.svg', '.jpg', '.jpeg', '.gif']
    }
};

萨斯文件:

.some-class{
    background: url('~images/myimage.png') // url-loader works, file-loader doesn't
    background: url('../../../images/myimage.png') // url-loader works, file-loader doesn't
    background: url('/images/myimage.png') // both loaders work until app mounted under a sub-directory
}

希望我只是错过了一些愚蠢的东西!

Answer 1

使用 publicPath，以 / 开头，即 /dist/而不是 dist/ .

否则，您 Assets 的路径将被解释为相对路径，如果是一个 sass 文档，例如 dist/daddy.scss从例如进口另一个dist/child.scss ， child 的路径将被解释为相对于爸爸的网址“文件夹”，即dist ，所以浏览器会寻找 dist/dist/child.scss .