美文网首页
vue项目全局引入scss样式复用文件的坑

vue项目全局引入scss样式复用文件的坑

作者: ciuhoi | 来源:发表于2021-04-26 18:12 被阅读0次

需要安装的sass插件:
node-sass、sass-loader、sass-resources-loader;

在vue.config.js引入:

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
    ...
    //全局引入scss文件
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "./src/assets/styles/config.scss";
                    @import "./src/assets/styles/mixin.scss";
                `
            }
        }
    }
};

重新运行项目,然而出错了



查询网上的解决方法:重新运行还是报同样的错误


将data改为prependData,还是报同样的错误
最后发现原来是sass-loader的版本问题:在package.json文件sass-loader的版本过高可能会导致出现这个问题,于是我把sass-loader版本降低,就可以了。
"dependencies": {
    ...
    "node-sass": "^5.0.0",
    "sass-loader": "^10.0.0",
    "sass-resources-loader": "^2.1.1"
  },

相关文章

网友评论

      本文标题:vue项目全局引入scss样式复用文件的坑

      本文链接:https://www.haomeiwen.com/subject/rjperltx.html