const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
// 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
// 因为 `scss` 语法在内部也是由 sass-loader 处理的
// 但是在配置 `data` 选项的时候
// `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
// 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
scss: {
additionalData: `
@import "assets/styles/common/variables.scss";
@import "assets/styles/common/px2rem.scss";
@import "assets/styles/iconfont/iconfont.scss";
`
},
}
},
chainWebpack: config => {
config
.resolve.alias
.set('@', resolve('src')) //配置src目录别名
.set('assets', resolve('src/assets')) //配置src/assets目录别名
.set('components', resolve('src/components')); //配置src/components目录别名
config
.plugin('html')
.tap(args => {
args[0].title= '答题项目'
return args
});
}
}
css中使用背景图片， 要是用~assets
.item_back {
background-image: url(~assets/images/2-1.png);
background-size: 100% 100%;
}
代码中使用图片也是~assets
<img src="~assets/img/1.png" >
参考自: https://zhuanlan.zhihu.com/p/393843736
