Question

当我构建（netflify构建）我的Gridsome个人网站时，顺风的CSS类不起作用，并且该网站的外观类似于没有CSS的情况。

我已经尝试在没有git的情况下进行构建，重新安装顺风车...

如果这是问题，我会显示我的网格配置：

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,
      },
    },
  },
}

Answer 1

您可以通过以下步骤将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'

Answer 2

我也遇到了这个问题。我使用了Gridsome的Tailwind插件，它在本地工作，但是当部署到Netlify时，并没有添加Tailwind CSS。

引用此起始文件：https://github.com/drehimself/gridsome-portfolio-starter/blob/master/src/layouts/Default.vue

我将int main() { // Take any two strings char s1[] = "GeeksforGeeks"; char s2[] = "for"; char* p; // Find first occurence of s2 in s1 p = strstr(s1, s2); // Prints the result if (p) { printf("String found\n"); printf("First occurrence of string '%s' in '%s' is '%s'", s2, s1, p); } else printf("String not found\n"); return 0; }和所有Tailwind导入文件添加到了“默认布局”模板的末尾，这对我有用。

我用Tailwind制作的CSS无法在netsome的gridsome上构建

2 个答案: