这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

原来用的少不知道，最近新搭建的项目，使用了各种版本的 vue ,每次导入 sass 都会出现问题，也是让我醉了。

这一次是因为公司使用了 vue/cli 4.x 搭建的项目，我安装 sass 以后因为配置的问题让我的项目死活起不来，在网上找了各种改善方法都无效。最终让我试出来了，简直太不容易了，希望在网上发帖的伙伴们遇到问题一定要把查到的方法试过以后发现真的有用再转发，不要对其他人造成误导啊。都是学习工，不容易啊，搜到的每一篇帖子都是精华才好。

报错信息

看到这种报错第一反应肯定是配置的问题，我搜到的错误配置方法： 这种不对，报错依旧。

正确的配置在这里，看过来！！！

vue.config.js配置文件，写入下列代码。

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'sass',
      patterns: [
        path.resolve(__dirname, './src/assets/styles/*.scss')      //你的.scss文件所在目录
      ]
    }
  }
}

报错消失， scss 样式生效。

还是有必要好好学习一下 webpack 的，这种问题简直就不是问题啦，从源头了解知识体系，再也不用担心有解决不了的 bug。

总结：

首先导入的 scss 没有生效，那要么是版本不兼容要么是配置出了错。关于兼容版本也只能通过阅读官方文档或者自己试错来解决，如果配置的问题，那就先要明白 vue-cli 的创建过程了。

vue-cli 是通过 webpack 打包代码的，一应插件都是在配置文件中配置，所以只要了解了插件导入的方法问题也就解决了。