2017-03-01 10 views
0

Reactアプリケーション(create-react-appから取り出されました)があり、PostpackをWebpack構成に追加しようとしています。postcss-loaderがprecssを認識しないWebpack

は、ここに私の(短縮)webpack.config.jsです:

module.exports = { 
    plugins: [ 
    require('precss'), 
    require('autoprefixer') 
    ] 
} 

マイファイル構造は次のとおりです:

project/ 
    src/ 
    assets/ 
    components/ 
    styles/ 
    views/ 
    index.js 
    package.json 
    postcss.config.js 
    webpack.config.js 

ときここに私のpostcss.config.js

... 
const postCSSConfig = require('./postcss.config'); 

module.exports = { 
    ... 
    module: { 
     loaders: [ 
      ... 
      { 
       test: /\.css$/, 
       loaders: [ 
        'style-loader', 
        'css-loader?importLoaders=1', 
        'postcss-loader' 
       ] 
      }, 
      ... 
     ] 
    }, 
    postcss: function() { 
     return postCSSConfig; 
    }, 
... 

です私は自分のCSSにPreCSSの機能のいくつか(例えばネスティングや変数など)を含めようとしています。スタイリングを壊してうまく動作しません。しかし、autoprefixerが動作します。私はPreCSSのためにnpm installを走らせて、物事を再配置しようとしましたが、まだ運がありません。アドバイスをいただければ幸いです。

+0

壊れたときのエラーは何ですか? –

+0

@AdamWolskiエラーはありません。CSSはネスト(および他のprecssのもの)をサポートしていません。 –

+0

あなたの設定から 'postcss'フィールドを削除してみてください。プラグインは、それ自身のファイルを探す必要があります。 –

答えて

0

webpack設定にpost-css設定を直接追加しようとしましたか?私はそれを成功させました。私は実際にpostcss.configに関するドキュメントを見つけられず、どのように正しく書かれているのでしょうか。

module.exports = { 
... 
    module: { 
    loaders: [ 
    ... 
    { 
     test: /\.css$/, 
     loaders: [ 
     'style-loader', 
     'css-loader?importLoaders=1', 
     'postcss-loader' 
     ] 
    }, 
    ... 
    ] 
    }, 
    postcss: function() { 
    return [ 
     require('precss'), 
     require('autoprefixer') 
    ]; 
    } 
}; 
+0

残念ながら、これは機能しませんでした。しかし、ありがとう! –

関連する問題