Question

Webpack / PostCSS无法处理具有内联注释的.pcss文件：

模块构建失败：语法错误
(77:5) Unknown word

> 77 |     //  }
     |     ^

PostCSS是我的Webpack配置的一部分：

let PostCSSConfig = {
        sourceMap: true,
        plugins:   () => [
            require('postcss-smart-import'),
            require('precss')({}),
            require('postcss-for')({}),
            require('postcss-mixins')({}),
            require('postcss-math')({}),
            require('postcss-percentage')({}),
            require('postcss-flexbugs-fixes')({}),
            require('postcss-cssnext')({browsers: ['> 0.05%', 'IE 7'], cascade: false})
        ]
    };

config.module.rules：

{
    test: /\.pcss$/,
    exclude: inlineCSS,
    use: ExtractTextPlugin.extract({
        use: [{
                loader: 'css-loader',
                options: {
                    sourceMap: true
                }
            },
            {
                loader: 'postcss-loader',
                options: PostCSSConfig
            }
        ]
    })
}

我尝试使用以下插件：

postcss注释
postcss-直列评论
postcss-SCSS
postcss-带注释

但没有人帮忙，我每次都有错误。

Answer 1

你提到postcss-comment，显然，postcss-comment不是PostCSS插件，而是解析器。

在我自己的项目中，我使用的PostCSS配置文件如下：

// postcss.config.js
module.exports = () => ({
    plugins: {
        'postcss-import': {},
        'postcss-cssnext': {},
        'cssnano': {},
    }
});

安装您选择的解析器：

npm i -D postcss-comment`

然后将以下行添加到您的配置中：

parser: require('postcss-comment'),

应该有用。

您的最终配置如下：

module.exports = () => ({
    parser: require('postcss-comment'),

    plugins: {
        'postcss-import': {},
        'postcss-cssnext': {},
        'cssnano': {},
    }
});

对我来说，关键是找到这个Github问题：https://github.com/postcss/postcss-scss/issues/58#issuecomment-318464851

Answer 2

内联注释（例如：// I'm a comment!）是无效的CSS。但是它们是有效的SCSS，因此，如果要在.css文件中使用它们，则需要使用带有PostCSS的SCSS解析器来转换这些文件。 PostCSS SCSS可以做到这一点。要使用它，请将其设置为PostCSS的解析器。这是一个webpack配置示例：

// webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.resolve(__dirname, "main.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js"
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          { loader: "css-loader" },
          // Set postcss-scss as the parser, allowing valid SCSS syntax
          { loader: "postcss-loader", options: { parser: "postcss-scss" } }
        ]
      }
    ]
  }
};

这将转换以下CSS：

// I am an inline comment!
// I'm invalid CSS, but I'll be transformed into a valid block comment.
body {
  background-color: gold;
}

对此：

/* I am an inline comment!*/
/* I'm invalid CSS, but I'll be transformed into a valid block comment.*/
body {
  background-color: gold;
}

这是一个有效的CodeSandbox示例：https://codesandbox.io/s/kxqv1xvlx5

Answer 3

我用添加到PostCSS生态系统中的这个小图书馆解决了这个问题： https://www.npmjs.com/package/postcss-strip-inline-comments

/* This comment will remain */
// This comment will be removed 
body {
    // This comment will also be removed 
    background-color: black;
}
// And so will this one

Answer 4

这里提到的那些 PostCSS 插件现在已经很老了，看起来与 Webpack 5 不兼容。

要使内联注释起作用，可以将“.css”文件重命名为“.scss”，然后使用“sass-loader”在“postcss-loader”之前处理它：

{
  test: /.s?css$/,
  sideEffects: true,
  use: [
    IS_PROD ? MiniCssExtractPlugin.loader : "style-loader",
    "css-loader",
    "postcss-loader",
    "sass-loader",
  ],
},

如何在PostCSS中支持内联评论？

4 个答案: