vue scss使用

1.安装scss文件

  npm install node-sass --save
  npm install sass-loader --save

2.在根目录文件配置全局scss文件

module.exports = {
    css: {
        // 给 sass-loader 传递选项
        loaderOptions: {
            // @/ 是 src/ 的别名
            // 所以这里假设你有 `src/assets/styles/index.scss` 这个文件就可以直接 `@import '@/assets/styles/index.scss';`
            sass: {
                additionalData: '@import "@/assets/styles/global.scss";'
            }
        }
    },
} 

3.使用

<style lang="scss" scoped>

.box {

  span {

    font-size: 20px;

    color: $red;

  }

}

</style>