Tailwind + Jekyll：包含部分 css 文件不起作用？答案

【问题标题】：Tailwind + Jekyll: including partial css files doesn't work?Tailwind + Jekyll：包含部分 css 文件不起作用？
【发布时间】：2022-08-14 09:36:41
【问题描述】：

我正在尝试从现在死掉的 Tachyons 框架迁移到 Tailwindcss。但是，有一个障碍我还没有想出如何克服。

我使用jekyll-postscss Gem 在jekyll build 期间启用postcss 处理。以下设置似乎可以很好地工作：

assets/css/styles.css:

---
---

@import \"tailwindcss/base\";
@import \"tailwindcss/components\";
@import \"tailwindcss/utilities\";

postcss.config.js:

module.exports = {
    parser: \'postcss-scss\',
    plugins: [
      require(\'postcss-import\'),
      require(\'tailwindcss\'),
      require(\'autoprefixer\'),
      ...(process.env.JEKYLL_ENV == \"production\"
        ? [require(\'cssnano\')({ preset: \'default\' })]
        : [])
    ]
};

tailwind.config.js:

module.exports = {
  purge: [
    \'./_includes/**/*.html\',
    \'./_layouts/**/*.html\',
    \'./_posts/*.md\',
    \'./*.html\',
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [
    require(\'@tailwindcss/typography\'),
  ],
}

使用jekyll build 命令，我可以在_site/assets/css 下看到正确生成的styles.css 文件。

但是，当我尝试导入其他 css 或 scss 文件时，它不起作用。例如，如果我将styles.css文件修改为以下

assets/css/styles.scss:

---
---

@import \"tailwindcss/base\";
@import \"tailwindcss/components\";
@import \"tailwindcss/utilities\";

@import \"test.css\"

其中test.css与styles.scss（assets/css/）在同一目录下，postcss-import抛出异常

Error: Failed to find \'./test.css\'
  in [
    /project
  ]
    at /project/node_modules/postcss-import/lib/resolve-id.js:35:13
    at async LazyResult.runAsync (/project/node_modules/postcss/lib/lazy-result.js:396:11)

我有点困惑为什么postcss-import 看不到这个文件。

标签： sass jekyll tailwind-css postcss postcss-import

【解决方案1】：

因为你导入的css资源不在解析路径下，所以默认解析路径包括：根目录、node_modules等，其他路径可以参考官方文档link。

您可以尝试以下方法来解决此问题：

修改postcss配置文件postcss.config.js

module.exports = {
    ...
    require('postcss-import')({
        addModulesDirectories: ["assets/css"]
    }),
    ...
};

修改主样式文件assets/css/styles.css
```
@import "assets/css/test.css"
```

【讨论】：