0

问题

我构建了一个 postcss 语法（解析器、标记器、字符串化器，整个工作），以便我可以让 postcss 识别 css 中的 hubl 语法（hubspot）。

Hubl 基本上是 Jinja，并且在 hubspot 上允许在 CSS 文件中使用。

如果我将我的 postcss 语法与纯 postCSS（无 webpack）一起使用，一切都会按预期工作。但是，当我将它全部包装在 webpack 中并使用 postcss 加载器时，似乎 postcss 运行了两次。

第一遍使用我的 postcss-hubl 语法运行，第二遍使用本机 postcss 语法。这导致我的 css 文件被覆盖并且没有按预期加载。

设置

postcss.config.js

const HublSyntax = require('@spingroup/postcss-hubl/lib/hubl-syntax');

module.exports = {
  syntax: HublSyntax,
  mode: "production",
  to: "./dist/main.css",
  plugins: []
};

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const path = require('path');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ],
  entry: {
    'index': './src/index.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production',
  module: {
    rules: [
      // Relevant config for MiniCssExtractPlugin:
      // (the order of `use` is important)
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
};

样式.css

{% if x %}
.test{
  text-align: center;
}
{% endif %}

预期产出

索引.css

{% if hubl statement %}
.test{
  text-align: center;
}
{% endif %}

实际输出

/*{% if hubl statement %}*/.test{
  text-align: center;
}
/*{% endif %}*/

我的语法扩展将 hubl 表达式视为注释，并将注释作为构建过程的一部分删除。但是，当在运行 css-loader 时使用原始语法时，这些注释会重新添加。

在调试过程中，我在我的插件和 css-loader、postcss-loader 和 postcss 的本机节点模块中记录了一大堆东西，以便我可以更好地理解事件流。

流日志

----------- Post CSS Loader Running -------------
Running new parser ==========================+
HUBL FIRE -------------------
HUBL FIRE -------------------
Hubl Stringify Running
Hubl Stringify Running
HUBL FIRE STRING start _-_---------------
HUBL FIRE STRING END _-_---------------
Hubl Stringify Running
Hubl Stringify Running
Hubl Stringify Running
HUBL FIRE STRING start _-_---------------
HUBL FIRE STRING END _-_---------------
----------- CSS Loader Running -------------
OG STRINGIFY
OG STRINGIFY
OG STRINGIFY
OG STRINGIFY
OG STRINGIFY

关于如何强制 CSS 加载器使用与 postcss-loader/postcss 相同的语法的任何建议？我什至在问正确的问题吗？我应该在哪里解决这个问题？

4

0 回答 0