时间戳

首页 > 解决方案 > Nuxt 构建不包含 node_modules CSS

node.js - Nuxt 构建不包含 node_modules CSS

问题描述

抱歉，我对 Nuxt 和 Webpack 很陌生。我有一个 Nuxt 项目，在其中运行 yarn dev 一切正常。但是当我使用 yarn build -> yarn generate 构建时，我在 node_modules 目录（dropzone.css、flatpickr.css 等）中引用的 .css 文件永远不会被包含在内并破坏了站点。我已经尝试了一切，但无法弄清楚我做错了什么。有人可以指出我正确的方向吗？当前运行带有 Tailwind.css 的 Nuxt v2.11.0。这是我的 nuxt.config.js 文件，主要是样板文件 -

require('dotenv').config()

export default {
    env: {
        baseUrl: process.env.BASE_URL || '/',
        apiUrl: process.env.API_URL
    },
    mode: 'universal',
    css: [
        '@/assets/css/tailwind.css',
        '@/assets/fonts/caslongraphique/webfont.css',
        '@/assets/fonts/turbinadobolddry/font.css',
        { src: 'nuxt-dropzone/dropzone.css', lang: 'css' },
        { src: 'vue-agile/dist/VueAgile.css', lang: 'css' },
        { src: 'flatpickr/dist/flatpickr.css', lang: 'css' },
        { src: 'flatpickr/dist/themes/airbnb.css', lang: 'css' }
    ],
    /*
    ** Plugins to load before mounting the App
    */
    plugins: [
        { src: '~plugins/helpers' },
        { src: '~plugins/vue-moment' },
        { src: '~plugins/vue-agile', mode: 'client' },
        { src: '~plugins/eventBus', mode: 'client' },
        { src: '~plugins/axios', mode: 'client' },
        { src: '~plugins/vuex-persist', mode: 'client' }
    ],
    buildModules: [
        // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
        '@nuxtjs/tailwindcss',
    ],
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/dotenv',
        // 'nuxt-client-init-module'
    ],
    build: {
        /*
        ** You can extend webpack config here
        */
        extend (config, ctx) {
        },
        postcss: {
            plugins: {
                // Disable a plugin by passing false as value
                'postcss-url': false,
                'postcss-nested': {},
                'autoprefixer': true
            },
            preset: {
                // Change the postcss-preset-env settings
                autoprefixer: {
                    grid: true
                }
            }
        },
    }
}

标签： node.jsvue.jswebpacknuxt.jsyarnpkg

解决方案

如果没有完整的项目来构建和运行，很难回答这个问题。我假设您在构建生产时没有使用单独的 webpack 配置文件，否则您会将其添加到问题中。您似乎在配置文件中使用了正确的语法，所以我猜您的 css 文件路径不太正确。它们看起来有点像旧的做事方式，您可能想确认它们并没有过时。这个古老的 github问题经历了您可以尝试的各种事情，其中​​让 nuxt 自动为您找到 css 的“编译”版本，如下所示：

css: [
        'nuxt-dropzone',
        ...etc
    ],

尝试删除所有第 3 方 css 文件，并在前一个文件正常工作后一次添加一个。

这个例子来自官方文档：

export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '@/assets/css/main.css',
    // SCSS file in the project
    '@/assets/css/main.scss'
  ]
}

推荐阅读