vue-cli4.x安装sass/scss/less方法及全局引用公共scss

目录

安装scss

全局引用scss变量

安装less

---

安装scss   推荐yarn 安装 较稳定

  

cnpm install [email protected] --save-dev
cnpm install [email protected] --save-dev

mac的话没有node-sass环境 使用以下版本

    "sass": "^1.26.5",
    "sass-loader": "^7.1.0",

全局引用scss变量

cnpm install --save-dev sass-resources-loader



//根目录创建vue.config.js文件  然后记得重启项目

module.exports = {
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule("scss").oneOfs.store;
    oneOfsMap.forEach((item) => {
      item
        .use("sass-resources-loader")
        .loader("sass-resources-loader")
        .options({
          // 在src/assets/目录下创建文件scss以及文件夹下的base.scss 这便是公共的样式
          resources: "./src/assets/scss/base.scss",
        })
        .end();
    });
  },
}

安装less

安装指定版本 4.1.0

cnpm install [email protected] --save

cnpm install [email protected] --save