如何在构建阶段从nuxt version3中提取css

Question

当我构建项目时，我会看到“内联”代码中使用的所有样式（在生产模式下） 重要：我的 nuxt 版本是 3

我尝试使用

nuxt generate

&

nuxt build

&

npm run build

&

npm run generate

&

nuxi build

我在我的 nuxt.config.js 中使用这些代码：

build: {
    css: {
      extract: true,
    },
  },

或

 webpack: {
      extractCSS: true,
      optimization: {
        splitChunks: {
          cacheGroups: {
            styles: {
              name: 'styles',
              test: /\.(css|vue)$/,
              chunks: 'all',
              enforce: true
            }
          }
        }
      }
    }
  }

或

build: {
    extractCSS: true,
  },
  webpack: {
    extractCSS: true,
  },
  buildModouls:{
    extractCSS: true,
  },

所以不要提取我的CSS代码！！为什么？如何修复它？ 有适用于 nuxt2 的，不适用于 nuxt3

Answer 1

我也遇到同样的问题

在 nuxt.config ts 中，您需要设置

builder:"webpack"

并在 webpack 部分 f.e. 中编写您的配置

export default defineNuxtConfig({
  builder:"webpack",
  css:["~~/assets/sass/_index.scss"],// your css
  webpack: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
})