vue 3.x - 安装scss/sass_vue-cli 3.x添加style-loader

vue 3.x - 安装scss/sass

1.首先执行以下命令安装 style-resources-loader;

vue add style-resources-loader
1

2.然后安装scss/sass,node-sass sass-loader sass 属于重要依赖，所以需-D而不是-S；

npm install node-sass sass-loader sass -D
1

安装如果报错

解决方案：直接在当前目录下进行node-sass 的数据源没设置

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
1

3.根路径下建立文件vue.config.js

const path = require('path');
module.exports = {
    pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'scss',
        patterns: []
      }
    }
}
1
2
3
4
5
6
7
8
9

4.调用test

<style lang="scss" scoped>
$bg: red;
.container {
  background-color: $bg;
}
1
2
3
4
5