vue-cli3.x配置全局scss报错怎么解决

在使用 Vue CLI 3.x 进行项目开发时，我们经常会使用 SCSS 来编写样式。为了在项目中全局引入 SCSS 文件，通常会在 vue.config.js 中进行配置。然而，有时在配置全局 SCSS 时会遇到一些报错，本文将介绍如何解决这些常见问题。

1. 配置全局 SCSS 的基本方法

在 Vue CLI 3.x 中，可以通过 vue.config.js 文件来配置全局 SCSS 文件。具体配置如下：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/variables.scss";`
      }
    }
  }
}

在上述配置中，additionalData 选项用于在每一个 SCSS 文件的开头自动引入指定的 SCSS 文件。@import "~@/styles/variables.scss"; 表示引入项目根目录下的 src/styles/variables.scss 文件。

2. 常见报错及解决方法

2.1 报错：SassError: File to import not found or unreadable

问题描述： 在配置全局 SCSS 文件时，可能会遇到如下报错：

SassError: File to import not found or unreadable: ~@/styles/variables.scss

原因分析： 这个错误通常是由于路径配置不正确导致的。~@/ 是 Vue CLI 中的别名，表示 src 目录。如果路径配置错误，SCSS 文件无法被正确引入。

解决方法： 1. 确保 variables.scss 文件存在于 src/styles/ 目录下。 2. 检查路径是否正确，确保使用了正确的别名 ~@/。

2.2 报错：Module build failed (from ./node_modules/sass-loader/dist/cjs.js)

问题描述： 在配置全局 SCSS 文件时，可能会遇到如下报错：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"

原因分析： 这个错误通常是由于 additionalData 配置的语法不正确导致的。在 Vue CLI 3.x 中，additionalData 的配置需要使用字符串模板，而不是直接使用 require 或 import。

解决方法： 确保 additionalData 的配置是一个字符串模板，而不是直接使用 require 或 import。例如：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/variables.scss";`
      }
    }
  }
}

2.3 报错：SassError: Undefined variable

问题描述： 在配置全局 SCSS 文件时，可能会遇到如下报错：

SassError: Undefined variable: "$primary-color".

原因分析： 这个错误通常是由于在全局 SCSS 文件中定义的变量没有被正确引入到其他 SCSS 文件中。

解决方法： 1. 确保在 variables.scss 文件中正确定义了 $primary-color 变量。 2. 确保 variables.scss 文件被正确引入到其他 SCSS 文件中。

2.4 报错：SassError: Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"

问题描述： 在配置全局 SCSS 文件时，可能会遇到如下报错：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"

原因分析： 这个错误通常是由于 additionalData 配置的语法不正确导致的。在 Vue CLI 3.x 中，additionalData 的配置需要使用字符串模板，而不是直接使用 require 或 import。

解决方法： 确保 additionalData 的配置是一个字符串模板，而不是直接使用 require 或 import。例如：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/variables.scss";`
      }
    }
  }
}

3. 总结

在 Vue CLI 3.x 中配置全局 SCSS 文件时，可能会遇到一些报错。本文介绍了几种常见的报错及其解决方法。通过正确配置路径、确保语法正确以及检查变量定义，可以有效解决这些问题。希望本文能帮助你在 Vue 项目中顺利使用全局 SCSS 文件。