Мой CSS, созданный с помощью Tailwind, не работает при сборке с gridsome для netlify

Когда я создаю (сборку netflify) свой личный веб-сайт Gridsome, классы CSS попутного ветра не работают, и веб-сайт выглядит как без CSS.

Я уже пробовал собирать без гита, переустановить попутный ветер ...

Я показываю свою конфигурацию сетки, если в этом проблема:

const tailwind = require('tailwindcss');
const purgecss = require('@fullhuman/postcss-purgecss');

const postcssPlugins = [
  tailwind(),
]

if (process.env.NODE_ENV === 'production') postcssPlugins.push(purgecss());

module.exports = {
  siteName: 'Zolder | Works',
  plugins: [],
  css: {
    loaderOptions: {
      postcss: {
        plugins: postcssPlugins,
      },
    },
  },
}

netlify build tailwind-css gridsome
person Zolder3007    schedule 14.09.2019    source источник
comment
Возможно, отсутствует требование для попутного ветра? const tailwind = require ('tailwindcss')   -  person Alan Jenkins    schedule 18.09.2019

Ответы (2)


arrow_upward
3
arrow_downward

У меня тоже была эта проблема. Я использовал плагин Tailwind для Gridsome, и он работал локально, но при развертывании в Netlify CSS Tailwind не добавлялся.

Ссылка на этот начальный файл: https://github.com/drehimself/gridsome-portfolio-starter/blob/master/src/layouts/Default.vue.

Вместо этого я добавил main.css со всем файлом импорта Tailwind в конец шаблона макета по умолчанию, и это сработало для меня.

person rcheuk    schedule 21.09.2019

arrow_upward
0
arrow_downward

Вы можете добавить Tailwind в свой проект Gridsome, выполнив следующие действия:

  • редактировать gridsome.config.js
    module.exports = {
      siteName: "Zolder",
      plugins: [],
      chainWebpack: config => {
        config.module
          .rule("postcss-loader")
          .test(/.css$/)
          .use(["tailwindcss", "autoprefixer"])
          .loader("postcss-loader");
      }
    };

  • создать global.css файл в ./src/styles

    @tailwind base;

@tailwind components;

@tailwind utilities;

  • импортировать global.css в main.js

    import './styles/global.css'

person Zooly    schedule 19.09.2019