В моем проекте NUXT кажется, что CSS дублируется не только для отдельных компонентов, но и при компиляции дублирует стили из моего nuxt.config.js - styleResources -> scss в тег head.
Это кажется проблемой для меня как до NUXT 2.0, так и после (текущая версия: 2.8.1). Я пробовал кучу вещей при сборке, но я должен что-то упустить...
Моя конфигурация для глобальных стилей:
module.exports = {
...
styleResources: {
scss: [
'~/styles/variables.scss',
'~/styles/normalize.scss',
'~/styles/forms.scss',
'~/styles/mixins.scss',
'~/styles/type.scss',
'~/styles/buttons.scss',
'~/styles/font.scss',
'~/styles/loader.scss'
],
},
build: {
path: '',
parallel: true,
cache: true,
optimization: {
minimize: true,
runtimeChunk: true,
concatenateModules: true,
splitChunks: {
chunks: 'all',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 20,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\/]node_modules[\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
},
// extractCSS: true,
optimizeCSS: true,
publicPath: process.env.CDN_URL || '',
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
// loader: 'pug-plain-loader',
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
},
plugins: [
new webpack.ProvidePlugin({
mapboxgl: 'mapbox-gl'
})
]
}
...
}
!https://i.imgur.com/Uls5Kbl.png !https://i.imgur.com/gcGR0La.png
Конечная цель, очевидно, состоит в том, чтобы не иметь повторяющихся стилей.





Модуль nuxt-styleResources предназначен только для совместного использования переменных scss и примесей между вашими компонентами. Вы не должны указывать там какие-либо стили, вместо этого используйте поле css:
styleResources: {
scss: [
'~/styles/variables.scss',
'~/styles/mixins.scss',
],
},
css: [
'~/styles/normalize.scss',
'~/styles/forms.scss',
'~/styles/type.scss',
'~/styles/buttons.scss',
'~/styles/font.scss',
'~/styles/loader.scss'
]