Nuxt Build不包括node_modules CSS

Question

对不起，我对Nuxt＆Webpack很陌生。我有一个Nuxt项目，其中的所有内容都可以很好地运行yarn开发人员。但是当我使用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
                }
            }
        },
    }
}

Answer 1

如果没有完整的项目来构建和运行，很难回答这个问题。我假设您在为生产而构建时没有使用单独的webpack配置文件，否则您应该将其添加到问题中。您似乎在配置文件中使用了正确的语法，所以我猜您的CSS文件路径不太正确。它们有点像旧的处理方式，您可能需要确认它们没有过时。 This old-ish github问题涉及您可以尝试的各种操作，其中包括让nuxt像这样自动为您找到CSS的“已编译”版本：

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

尝试删除所有第三方的css文件，并在前一个工作之后将它们一次又添加回去。

此示例来自the official docs：

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'
  ]
}