Сборка Nuxt не включает node_modules CSS - PullRequest
Новая
       46

Сборка Nuxt не включает node_modules CSS

1 голос
/ 23 марта 2020

Извините, я довольно новичок в Nuxt & Webpack. У меня есть проект Nuxt, в котором все работает отлично, работает пряжа Dev. Но когда я строю с использованием yarn build -> yarn generate, файлы. css, на которые я ссылаюсь в каталоге node_modules (dropzone. css, flatpickr. css et c), никогда не включаются и нарушают работу сайта. Я попробовал все, но не могу понять, что я делаю неправильно. Может ли кто-нибудь указать мне правильное направление? В настоящее время работает Nuxt v2.11.0 с Tailwind. css. Это мой файл 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
                }
            }
        },
    }
}

1 Ответ

0 голосов
/ 25 марта 2020

Довольно сложно ответить на этот вопрос, не имея полного проекта для сборки и запуска. Я предполагаю, что вы не используете отдельный файл конфигурации webpack при сборке для производства, иначе вы бы добавили это к вопросу. Похоже, вы используете правильный синтаксис в файле конфигурации, поэтому я предполагаю, что ваши css пути к файлам не совсем верны. Они вроде как старый способ ведения дел, вы можете подтвердить, что они не устарели. Эта проблема old-i sh github охватывает различные вещи, которые вы можете попробовать, в том числе позволить nuxt автоматически найти для вас скомпилированную версию css следующим образом: 

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

Попробуйте удалить все сторонние 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'
  ]
}
...