如果已经有 SASS 样式，Vue JS 会导入全局 SCSS 样式答案

【问题标题】：Vue JS import global SCSS styles if there is already SASS style如果已经有 SASS 样式，Vue JS 会导入全局 SCSS 样式
【发布时间】：2019-08-04 09:40:49
【问题描述】：

正如您在配置文件中看到的那样，我正在导入全局 SCSS 文件，但是当我运行 npm run serve 时它失败了，因为我使用的是 Vuetify 并且它正在使用 SASS。有办法吗？还是每次制作新组件时都必须导入 SCSS ？像以前一样？

我试过了：

data: `@import "@/styles/global.scss"
       @import "@/styles/_variables.scss"`

还有

data: `@import "@/styles/global.scss"`

vue.config.js文件：

module.exports = {
  pluginOptions: {
    i18n: {
      locale: 'sk',
      fallbackLocale: 'sk',
      localeDir: 'locales',
      enableInSFC: false
    }
  },
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/global.scss";`
      }
    }
  }
};

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

你绝对应该使用style-resources-loader。

这个加载器是 webpack 的 CSS 处理器资源加载器，它将您的样式资源（例如variables / mixins）注入多个导入 css / sass / scss / less / stylus 模块。

Vue CLI Automatic imports.

您也可以使用vue-cli-plugin-style-resources-loader。

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'patterns': [
        path.resolve(__dirname, 'src/styles/_variables.scss'),
      ]
    }
  }
}

【讨论】：

我试过了，现在我在使用 _variables.scss 文件 Undefined variable. 中的某些内容的每个组件中都遇到错误
并且，请提供您当前的配置。
错误：```未定义的变量。颜色：$主色； ``` 当前配置 ``` const path = require('path'); module.exports = { pluginOptions: { i18n: { locale: 'sk', fallbackLocale: 'sk', localeDir: 'locales', enableInSFC: false }, 'style-resources-loader': { 'patterns': [ path.解决(__dirname, 'src/styles/_variables.scss'), path.resolve(__dirname, 'src/styles/global.scss'), ] } } }; ```
所以，也许你没有定义$main-color。如果您能提供发生错误的文件以及_variables.scss 和global.scss，那就太好了。
global.scss 在_variables.scss 中只有整个应用程序的全局样式@ 就是这个$bg-color: #15151B; $main-color: #42b983;