Vue-cli3中sass的安装，以及安装时-S和-D的区别

Vue-cli3中sass的安装，以及安装时-S和-D的区别

参考:https://blog.csdn.net/weixin_41967475/article/details/109343259

1.安装resources-loader

cnpm install style-resources-loader@1.3.3 -D
cnpm install vue-cli-plugin-style-resources-loader@0.1.4 -D

注：尽量用cnpm安装，npm安装可能会报错
注：尽量按照这个版本号来装，新版本可能会有冲突，报错

2.安装node-sass和sass-loader

cnpm install node-sass@5.0.0 -D

cnpm i sass-loader@8.0.2 -D

3.在项目根目录下创建vue.config.js配置文件

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'sass',
      patterns: [
        path.resolve(__dirname, './src/assets/css/*.scss') //.scss文件所在目录
      ]
    }
  }
}

4.-S和-D的区别

-S 是–save的意思，包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在

-D 是–dev的意思，包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如：babel，sass-loader这些解析器

注：使用npm安装时，需要添加上-s或-d，不然不会在package.json中显示；当删除node_modules后，再npm install下载是根据package.json文件