Как представить scss глобально в vue

Во-первых, в App.vue можно добавить некоторые общие CSS.

 

Затем в проекте часто используются некоторые функциональные scss, такие как миксины, функции и т. д. На данный момент они невалидны в main.js и app.vue.

Сначала проверьте свои собственные версии sass и sass-loader, обратите внимание на установочную версию sass-loader, если это версия v8, используйте prependDatea , в приведенной выше версии используется элемент конфигурации extraData (перевод: дополнительный).

Добавьте следующий код в файл конфигурации vue.config.js:

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
module.exports = defineConfig({
  //使用es6相关的依赖
  transpileDependencies: true,
   // 关闭检查代码格式
   lintOnSave: true,
   chainWebpack: config => {
    // eslint-disable-next-line no-unused-expressions
    config.resolve.alias
      .set('@', path.join(__dirname, 'src'))
      .set('_views', path.join(__dirname, 'src/views'))
      .set('_components', path.join(__dirname, 'src/components'))
      .set('_api', path.join(__dirname, 'src/api'))
      .set('_utils', path.join(__dirname, 'src/utils'))
      .set('_style', path.join(__dirname, 'src/style'))
  },
  css: {
    loaderOptions: {
      scss: {
        additionalData: `
        @import "@/style/common.scss";
        @import '@/style/class.scss';
        @import '@/style/variable.scss';
        `,
      },
    },
  }
})

 css: {
    loaderOptions: {
      scss: {
        // 如果版本较低请使用prependDatea
        additionalData: `
        @import "@/style/common.scss";
        @import '@/style/class.scss';
        @import '@/style/variable.scss';
        `,
      },
    },
  }

После настройки вы можете использовать его в каждом компоненте!