css - 如何在 PostCSS 中支持内联注释？

Question

Webpack/PostCSS 无法处理包含内联注释的 .pcss 文件:

Module build failed: Syntax Error

(77:5) Unknown word

> 77 |     //  }
     |     ^

我的 Webpack 配置的 PostCSS 部分:

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-comment
• postcss-inline-comment
• postcss-scss
• postcss-strip-comments

但没有任何帮助，我每次都出错。

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