Vue-cli4.x installs sass/scss/less methods and globally references public scss

Table of contents

install scss

global reference to scss variable

install less

---

Install scss and recommend yarn to install more stable

  

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

If there is no node-sass environment for mac, use the following version

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

global reference to scss variable

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();
    });
  },
}

install less

Install the specified version 4.1.0

cnpm install [email protected] --save

cnpm install [email protected] --save