vue-cli3.0配置别名并引用
搭建vue- cli3.0脚手架后,在项目根目录下,也就是与package.json文件同级目录新建vue.config.js文件,在该文件中配置const path = require('path');function resolve(dir) {return path.join(__dirname,dir);}module.exports = {chainWebp...
·
搭建vue- cli3.0脚手架后,在项目根目录下,也就是与package.json文件同级目录新建vue.config.js文件,在该文件中配置
const path = require('path');
function resolve(dir) {
return path.join(__dirname,dir);
}
module.exports = {
chainWebpack: config => {
// @scss是你取的静态资源路径别名
config.resolve.alias.set('@scss', resolve('src/static/scss'))
// 若需要配置多个别名,后续紧跟着设置set即可
/* config.resolve.alias.set('@scss', resolve('src/static/scss')).set('@',resolve('src'))
*/
},
css: {
loaderOptions: {
// 给 sass-loader 传递选项,这里配置的是全局导入
sass: {
// @scss 是 src/static/scss 的别名
data: `@import "@scss/index.scss";`
}
}
},
}
在.vue文件中使用
@import url(`@scss/xxx.scss`);
更多推荐
已为社区贡献9条内容
所有评论(0)