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 = {
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`);