Во-первых, в 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';
`,
},
},
}
После настройки вы можете использовать его в каждом компоненте!