sass在vue-cli3中的使用

[H-Stephen]

一、安装loader

分别style-resources-loader 和 vue-cli-plugin-style-resources-loader （前提是已经安装过 sass sass-loader）

vue add style-resources-loader
或
yarn add  style-resources-loader vue-cli-plugin-style-resources-loader -D

二、在vue.config.js中配置

// vue.config.js
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [
        resolve('./src/styles/global.scss')  // 声明scss全局变量的文件
      ]
    }
  }
};

三、相关问题

按以上两个步骤，可以在任何.vue文件的style标签中正常使用全局变量，但如果.vue文件中的scss是用@import url('')这种方式导入就例外

.vue文件中：
<style lang="scss">
// @import url('./index.scss'); 这种方式导入-index.scss中全局变量无法被解析
@import "./index.scss";
</style>