NUXT 复制样式

Question

在我的 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.stack.imgur.com/wviJ3.png ！https://i.stack.imgur.com/tBoRE.png

最终目标显然是没有重复的样式。

Answer 1

nuxt-styleResources 模块仅用于在组件之间共享 scss 变量和 mixin。你不应该在那里指定任何样式，而是使用 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'
   ]