由于不同的电脑node环境可能版本不一样 所以造成直接使用npm去安装node-sass 和 sass-loader 很容易会造成版本不匹配 

会报错：....this.getOptions is not a function...

如果你已经安装过了 但是报错了的 停掉项目 然后卸载掉node-sass和sass-loader （没有cnpm可以用npm）

cnpm uninstall sass-loader node-sass

然后重新安装相匹配的版本：（我这里以我自己的 node版本 v10.16.0为例 v14.17.6也适用）

cnpm install node-sass@4.14.1 --save-dev
cnpm install sass-loader@7.3.1 --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();
    });
  },
}

安装指定版本 4.1.0

cnpm install less-loader@4.1.0 --save

cnpm install less@4.0.0 --save

分享到：

打赏