NUXT复制样式

NUXT Duplicating Styles(NUXT复制样式)

问题描述

在我的NUXT项目中，似乎正在复制CSS，不仅在单个组件上，而且在编译时将样式从我的nuxt.config.js-style leResources->SCSS复制到head标记中。

对于NUXT2.0之前的版本和发布后的版本(当前版本：2.8.1)，这似乎都是一个问题。我在Build上尝试了很多东西，但我肯定遗漏了一些东西.

我的全局样式配置：

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-style资源模块

推荐答案

仅用于在您的组件之间共享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'
   ]

这篇关于NUXT复制样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！