webpack alias解析后的路径错误

发布于 2022-09-11 23:00:14 字数 1946 浏览 28 评论 0

下面是我的webpack配置文件,在scss里面引入一个背景图片

background: url('~imgs/background.jpg') no-repeat;

图片放在src/images/background.jpg。

但是路径解析成 css/images/background.jpg 前面多了一个css。
我在js里面import 'imgs/background.jpg'最后解析的路径是对的,只有在scss里路径多了一层css

entry: {
    index: path.resolve(__dirname, '../src/index.js')
},
output: {
    filename: 'js/[name].[hash:8].js',
    path: path.resolve(__dirname, '../dist')
},
resolve: {
    extensions: ['.js', '.jsx', '.tsx', '.ts'],
    alias: {
        'imgs': path.resolve(__dirname, '../src/images')
    }
},
module: {
    rules: [
        {
            test: /\.jsx?$/,
            use: 'babel-loader',
            exclude: /node_modules/
        },
        {
            test: /\.tsx?$/,
            use: 'ts-loader'
        },
        {
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
            ]
        },
        {
            test: /\.(scss|sass)$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
                'sass-loader'
            ]
        },
        {
            test: /\.(png|jpg|jpeg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images/',
                    limit: 8192 //8kb
                }
            }
        },
        {
            test: /\.(eot|ttf|svg|woff|woff2)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'font/'
                }
            }
        }
    ]
},
plugins: [
    new MiniCssExtractPlugin({
        filename: 'css/[name].[hash:8].css',
        chunkFilename: 'css/[id].[hash:8].css',
    })
]

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

一世旳自豪 2022-09-18 23:00:14
new MiniCssExtractPlugin({
    filename: 'css/[name].[hash:8].css'
})

这段代码的问题 去掉css/就可以了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文