webpackからCSS/Autoprefixerが動作しないようにします。

webpackには新しくなっていますが、現在はwebpackがドキュメント本体にスタイルを注入しています。私はこれを達成する方法がわかりません。ここでwebpackからCSS/Autoprefixerが動作しないようにします。

は私のwebpack.config.js

var webpack = require('webpack'); 
var autoprefixer = require('autoprefixer'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    output: { 
     filename: 'bundle.js' 
    }, 
    entry: { 
     app: './js/app.js' 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract({use:[{loader: 'css-loader', options: {importLoaders: 1}}, 'postcss-loader', 'sass-loader']}) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('styles.css'), 
     new webpack.LoaderOptionsPlugin({options: { 
      context: __dirname, 
      postcss: [ 
       autoprefixer 
      ] 
     }}) 
    ] 
};

html出力であるあなたは、それは私が持っているSCSSファイルと一致していないCSSを注入まだ見ることができるように

<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" href="/wp-content/themes/index/styles.css"> 
     <style type="text/css"> 
      body { 
      background-color: black; } 

      h1 { 
       color: #fff; } 

      p { 
       display: flex; 
       color: #fff; } 
     </style> 
     <style type="text/css"></style> 
    </head> 
    <body> 
     <h1>Test</h1> 
     <p>Test</p> 
     <script src="/wp-content/themes/index/dist/bundle.js"></script> 
    </body> 
</html>

です。また、flexプロパティに接頭辞を付けたり、私のsassファイルにあるインポートを含めたりしていません。

h2 { 
    color: blue; 
}

出典

2017-11-29 dnaluz

Euuuh ...あなたはscssローダーであるローダーは1つしかありません...あなたは正確に何を期待していますか？ – briosheje

_test.scss

main.scss

@import 'test'; 

body { 
    background-color: black; 
} 

h1 { 
    color: #fff; 
} 

p { 
    display: flex; 
    color: #fff; 
    background-color: red; 
}

お使いの設定で対処する必要がある3つの問題があります。

module内のloadersプロパティは、最初にrulesに名前を変更する必要があります。あなたが今持っている方法は、webpack 1の正しい方法、webpack 2+はrulesの使い方でした。 https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

次に、LoaderOptionsPluginを使用してwebpack 1からwebpack 2に移行しました。これについてはhereを読むことができます。

postcss-loaderにオプションを取り付けるための新しい推奨方法は次のようになります。代わりに上記の構成により

{ 
    loader: 'postcss-loader', 
    options: { 
     plugins: [autoprefixer()] 
    } 
}

、あなたのCSSを始めなければなりません、あなたは安全にあなたのplugins配列からwebpack.LoaderOptionsPluginを削除することができます。あなたは上記提供された情報が正しいかどうmain.scssにあなたはそれが_testをインポートすると、あなたはそれがバンドルに含まれるはずです

@import 'test';

の変更を持っているので、最後に、_test.scssが最終的なバンドルに含まれていません

。

出典

2017-11-29 20:34:28 KyTrol

webpackからCSS/Autoprefixerが動作しないようにします。

答えて

関連する問題