webpack alias解析后的路径错误
下面是我的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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
这段代码的问题 去掉css/就可以了