const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
css: {
loaderOptions: {
// 給 sass-loader 傳遞選項
// 默認情況下 `sass` 選項會同時對 `sass` 和 `scss` 語法同時生效
// 因為 `scss` 語法在內(nèi)部也是由 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
