vue scss 使用及踩坑

2020-04-21 10:08:56 阅读：261 来源： 互联网

标签：scss npm vue sass loader 使用 save resources

原文地址:https://www.cnblogs.com/xulei1992/p/12101068.html

1.安装

npm install sass-loader node-sass vue-style-loader --save

若运行时报错：

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

这是因为当前sass的版本太高，webpack编译时出现了错误，找到package.json文件，将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

或者卸载当前版本，然后安装指定的版本

npm uninstall sass-loader
npm install sass-loader@7.3.1 --save-dev

2.build/webpack.base.conf.js,在rules中添加scss规则

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}

3.在vue文件中添加

<style lang='scss'>
</style>

必须添加，无论是引入文件还是页面里写，若引入文件未写则不会生效。

4.全局引用时需要安装sass-resources-loader

npm install sass-resources-loader --save-dev

5.修改build中的utils.js

将

scss: generateLoaders('sass')

修改为：

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/assets/css/common.scss')
    }
  }
)

标签：scss,npm,vue,sass,loader,使用,save,resources
来源： https://www.cnblogs.com/yangfei123/p/12742570.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue scss 使用 及 踩坑

vue scss 使用及踩坑