☰

PostCSS でインラインコメントをサポートするにはどうすればいいですか? 質問する

tag-icon • tag-icon css webpack sass postcss
PostCSS でインラインコメントをサポートするにはどうすればいいですか? 質問する

Webpack/PostCSS は、インライン コメントを含む .pcss ファイルを処理できません。

モジュールのビルドに失敗しました: 構文エラー

(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
            }
        ]
    })
}

以下のプラグインを使用してみました:

  • ポストCSSコメント
  • postcss インラインコメント
  • postcss-scss
  • postcss-ストリップ-コメント

しかし、どれも役に立たず、毎回エラーが発生しました。

ベストアンサー1

あなたが言及している はpostcss-comment、どうやらpostcss-commentPostCSSプラグインではなく、パーサー。

私のプロジェクトでは、次のような 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

おすすめ記事