vue2.0/3.0在main.js引入scss文件报错

摘要：在vue2.0的main.js中引入scss文件报错原因是：在build文件夹下的webpack.base.conf.js的rules里面添加配置，vue3.0写入.scss文件在mian.js中 import ‘./styles/index.scss‘后出现下图报错解决方法：在vue.config.js文件中添加以下代码

1、在vue2.0的main.js中引入scss文件报错

原因是：在build文件夹下的webpack.base.conf.js的rules里面添加配置

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

上面那条配置可以省略，因为最新的vue-cli已经是默认配置好sass的（在build/util.js里），所以如果再在webpack里配置会重复，因此在main.js引入scss文件时会报错，也就是所只要安装了sass就行，什么都不用配置了。

2、vue3.0在main.js中引入.scss文件报错

写入.scss文件在mian.js中 import ‘./styles/index.scss‘后出现下图报错

解决方法：在vue.config.js文件中添加以下代码

module.exports = {

　css: {
　　loaderOptions: {
　　　sass: {
　　　　　data: `@import "@/style/index.scss";`
　　　}
　　}
　}
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1727