在Vue中配置sass全局文件

安装sass和sass-loader

npm install -D sass-loader sass

如果在创建项目时选择了css预处理器就不用在安装了

配置文件

在vue.config.js文件中添加

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: `@import "~@/variables.sass"`
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: `@import "~@/variables.scss";`
      }
    }
  }
}

注意sass-loader的版本，我的版本是 12.6.0，选项名是additionalData，如果是v8版本要改成prependData。写错了会报这个错：

    Syntax Error: ValidationError: Invalid options object. Sass Loader has been initializedusing an options object that does not match the API schema.
 - options has an unknown property 'prependData'. These properties are valid:
   object { implementation?, api?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }

全局文件不会在<style></style>中起作用，只在<style lang="scss"></style>或<style lang="sass"></style>中起作用

新版本也不需要安装node-sass也可以配置全局文件。

官方文档