Webpack 3+postcss+sass+css自動接頭辞構成追加

しばらくノートを書いていないので、今日は

を記録します.

本はreactフレームワーク,webpack 3+sassの構成

を用いた.

現在、私たちはcssスタイルを書いています.ブラウザの互換性の問題を処理しなければなりません.それは接頭辞の問題ですが、私たちが開発したとき、例えば:

.className{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

このように書くのは悩んでいるのではないでしょうか.しかし、私は次のように書きたいと思っています.

.className{
   display: flex;
}

実は私达は本当に开発して今、普通は上のように书いて、それからパッケージとプラグインを通じて、私达に书いた様式に自动的に各种のブラウザの下で対応する书き方を加えさせます.
構成したら?
ここではwebpack,style-loader,css-loader,postcss-loader,sass-loader,autoprefixerを用いた
プラグインのインストール

npm install --save-dev webpack style-loader css-loader postcss-loader sass-loader autoprefixer

   yarn    

yarn add webpack style-loader css-loader postcss-loader sass-loader autoprefixer

個人的にはyarnが好きです.どのようにインストールして使用するかはyarnをクリックすることができます.
Webpackを構成します.config.js

コードを直接見ましょう

  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      {
        test: /\.scss$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader', options: {
              sourceMap: true, modules: true,
              localIdentName: '[local]_[hash:base64:5]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              config: {
                path: 'postcss.config.js'  //               
              }
            }
          },
          {
            loader: 'sass-loader', options: { sourceMap: true }
          }
        ]
      }
    ]
  },

プロジェクトルートディレクトリにpostcssを作成します.config.js

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

package.jsonファイルにサポートするブラウザを追加します.

 "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

ここまで来ると基本的に安心してスタイルを書くことができ、ブラウザの接頭辞が書かれているかどうかを心配する必要はありません.webpackに自動的に打ち込んでもらいます.
具体的には、GitHub react-webpack-demoプロジェクトを参照してください.