0

現在廃止されている cssnext および cssnext-loader の使用から、postcss-cssnext および postcss-loader への webpack 構成の変換に問題があります。私が再作成しようとしている機能は機能固有のプラグインに委譲されているというDocの状態は明らかですが、まだ機能していないようです。その一例が css 変数です。

私の現在の作業 webpack 構成は次のようになります。

...プラグインのインポート

var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var customMedia = require("postcss-custom-media");

...ローダー構成

module: {
    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader!cssnext-loader",
        include: path.join(__dirname, 'src')
    }]
},

...postcss 設定

postcss: function() {
    return [customMedia(), cssnext(), autoprefixer()];
}

問題：

新しい postcss-cssnext モジュールを指すように cssnext インポートを交換し、css 変数 (postcss-custom-properties) を処理するために必要になったモジュールを追加しました。cssnext-loader も削除しましたが、postcss-loader で処理できると想定していますか???

...プラグインのインポート

var cssnext = require('postcss-cssnext');
var autoprefixer = require('autoprefixer');
var customMedia = require("postcss-custom-media");
var customProperties = require('postcss-custom-properties');

...ローダー構成

module: {
    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader",
        include: path.join(__dirname, 'src')
    }]
},

...postcss 設定

postcss: function() {
    return [customMedia(), cssnext(), customProperties(), autoprefixer()];
}

すべてのスタイルがページにレンダリングされていることがわかりますが、どの CSS 変数も評価されていません。中心的な問題は、「cssnext-loader」の使用に関連しているようです。再度追加すると、変数が機能します。postcss-import とさまざまな構成の反復を試しましたが、何も機能していないようです。誰かが私が間違っていることについて何か考えがありますか? postcss-cssnext、postcss-loader、css 変数、および webpack を連携させるにはどうすればよいですか?

4

2 に答える 2

3

まず、cssnext と postcss-cssnext には、ホームページとドキュメントの機能ページに記載されているように、postcss-custom-media、postcss-custom-properties、および autoprefixer が既に含まれているため、これらすべてを含める必要はありません。

以前に cssnext で使用していたのとまったく同じ機能が必要で (cssnext-loader を使用していたという事実から推測しています)、@importステートメント (cssnext に含まれる変換でした) を使用している場合は、安全につかむことができます。 postcss -cssnext移行ガイドへのcssnextのpostcss-loaderの例。

于 2016-03-05T21:11:43.383 に答える