顺风+ Jekyll:包括部分css文件不起作用？

Question

我正试图从现在的死速子框架迁移到Tailwindcss。然而，有一个街区我还没有弄清楚如何克服。

我使用jekyll-postscss Gem在jekyll build期间启用后enable处理。下面的设置似乎运行得很好：

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没有看到这个文件。

Answer 1

因为您导入的css资源不在解析路径中，默认解析路径包括:根目录、node_modules等。其他路径可以引用正式文档链接。

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

1. 修改postcss配置文件postcss.config.js module.exports ={。要求(‘postcss-import’)({ addModulesDirectories：“资产/css”})，. }；
2. 修改主样式文件assets/css/styles.css @import "assets/css/test.css“

Answer 2

我使用了类似于唐尼建议的解决方案，但是我设置了path而不是addModulesDirectories，这为我解决了这个问题。我没有尝试addModulesDirectories，所以我不知道这是否也有效。

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