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.imgur.com/Uls5Kbl.png ！https://i.imgur.com/gcGR0La.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'
   ]

NUXT复制样式

1 个答案: