vue.js 如何在构建阶段从nuxt版本3中提取css

bzzcjhmw 于 2023-10-23 发布在 Vue.js

关注(0)|答案(2)|浏览(219)

当我构建我的项目时，我看到我的代码中使用的所有样式都是“内联”（在生产模式下）重要的：我的nuxt verion是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代码！为什么？怎么能修好？存在对nuxt 2有效而对nuxt 3无效的情况

vue.js

来源：https://stackoverflow.com/questions/76712821/how-can-extract-css-from-nuxt-version3-in-build-stage

2条答案

按热度按时间

azpvetkf1#

我有同样的问题
在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
          }
        }
      }
    }
  }
})

赞(0）回复(0）举报 2023-10-23

nwo49xxi2#

这对我很有效：

export default defineNuxtConfig({
  ...
   experimental: {
     inlineSSRStyles: false,
   },
  ...
});

赞(0）回复(0）举报 2023-10-23

我来回答

vue.js 如何在构建阶段从nuxt版本3中提取css

2条答案

相关问题

热门标签

最新问答