Nuxt Build不包含node_modules CSS

Question

对不起，我对Nuxt & Webpack是个新手。我有一个Nuxt项目，其中一切运行良好的纱线开发。但是当我使用yarn构建-> yarn生成时，我在node_modules目录中引用的.css文件(dropzone.css、flatpickr.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'
  ]
}