vanilla-extract/css-在gatsby改造期间问题记录

order-conflict-warning

当使用vanilla-extract/css时，当导出命名书写不规范时就会报order-conflict类似如下警告：

shell

warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--12-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-2!./node_modules/bootstrap/dist/css/bootstrap.css
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
eOf-1-3!./src/components/cards/style.scss
   - couldn't fulfill desired order of chunk group(s) component---src-pages-404-tsx, component---src-pages-handelsbetingelser-tsx,
component---src-pages-kontakt-tsx, component---src-pages-priser-tsx, component---src-pages-privatpolitik-tsx
   - while fulfilling desired order of chunk group(s) component---src-pages-baggrund-tsx, component---src-pages-betaling-tsx,
component---src-pages-din-rapport-tsx, component---src-pages-foer-du-starter-tsx, component---src-pages-hent-rapport-tsx,
component---src-pages-hvorfor-klagen-tsx, component---src-pages-newcase-tsx, component---src-pages-send-din-sag-tsx, component---src-pages-tak-tsx,
 component---src-pages-xxx-tsx
 * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
eOf-1-3!./src/components/layout/xxx.css.ts
   - couldn't fulfill desired order of chunk group(s) component---src-pages-404-tsx, component---src-pages-blog-tsx,
component---src-pages-case-rosario-tsx, component---src-pages-handelsbetingelser-tsx, component---src-pages-kontakt-tsx,
component---src-pages-priser-tsx, component---src-pages-privatpolitik-tsx, component---src-pages-send-din-sag-tsx, component---src-pages-tak-tsx
   - while fulfilling desired order of chunk group(s) component---src-templates-tag-tag-template-tsx,
component---src-templates-category-category-template-tsx, component---src-pages-hvorfor-klagen-tsx
 * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
eOf-1-3!./src/components/blog/xxx.css.ts

问题出在[mini-css-extract-plugin]的拓扑排序算法导致,解析问题可以查看 stackoverflow 大神的debug分析以及 mini-extract-plugn issue 讨论

针对这个警告有如下两种措施：

尽量不要以字母顺序命名且分布在不同的文件中(限制较大且繁琐)

// a.entry.js
import './a.css'
import './b.css'

// b.entry.js
import './b.css'
import './c.js'

// c.js
import './a.css'

启用mini-css-extract-plugin忽略警告配置

webpack: {
  configure: (webpackConfig, { env }) => {
    if (env === 'production') {
      const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(
        plugin => plugin instanceof MiniCssExtractPlugin
      );
      instanceOfMiniCssExtractPlugin.options.ignoreOrder = true;
    }
    return webpackConfig;
  }
}

gatsby-plugin-page-creator-production-build-error

因为使用了.css.ts作为样式文件，当在pages目录下使用样式文件时在生产环境打包将会报错，需要手动忽略处理目标文件:

{
  resolve: 'gatsby-plugin-page-creator',
  options: {
    path: path.resolve('src/pages'),
    ignore: {
      patterns: ['**/*.css.ts']
    }
  }
}