Question

正如您在配置文件中看到的那样，我正在导入全局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";`
      }
    }
  }
};

Answer 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'),
      ]
    }
  }
}

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

1 个答案: