WebPACKの戦闘（VII）：シンプルな使用方法とプラグインPostCSSの使用のいくつかを知ってもらいます

無意識のうちに春祭りが間近に迫っている、今日は休日は翌日で、その後、時間が自分ではない、すべてを考えるように家に帰る、とその子供たち、親戚でプレーするというように、私は鄭州に2を利用しました日、春祭りの後の数日は、事前に記事全文を公開します。事前に私はあなたのすべてのハッピーニューイヤーを望みます！！

私はPostCSSに関連する主な技術的な側面を共有し、今日、6つの関連する技術的な知識のWebPACKの側面を書いてきたように、PostCSSは厳密にCSSプリプロセッサではない話すが、JavaScriptとプラグインとの変換ツールのCSSコードツール。その動作モードは、ソースコードを受信するとスタイルは、プラグイン処理、最終出力CSSをコンパイルと呼びます。多くの強力なプラグインPostCSSが含まことで、私たちはより良いブラウザの互換性を確保するために、更新のCSSプロパティを使用することができます。

PostCSSの特長

サポート将来のCSS、CSSの将来の使用のcssnext書き込み
コンパイル速度が大幅に改善されています
豊富なプラグインシステム
CSSはモジュール式にすることができ

WebPACKのPostCSSの使用状況

使用はpostcssローダー、postcssローダーをインストールNPMとPostCSSのWebPACK接続されています。インストールのコマンドラインは次のよう：

npm install postcss-loader --save-dev

次のようにwebpack.config.js構成は次のとおりです。

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: './dist'
          },
        }, 'css-loader'], // "css-loader" 将 CSS 转化成 CommonJS 模块
        exclude: /node_modules/
      },
      {
        test: /\.scss$/i,
        use: ['style-loader',
        {
          loader: 'css-loader',
          options: {
            sourceMap: true
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        },
        'postcss-loader'  //配置postcss-loader
        ], 
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              [
                'env', {
                  modules: false
                }
              ]
            ]
          }
        }
      }
    ],
  },
  plugins: [new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css'
  })],
}

postcssローダは、CSS-ローダーを組み合わせることができますだけでも使用することができ、それが単独で使用されて所望の効果を達成することができますが、単独で使用した場合、CSSの構文で使用@importのために推奨されていない、または冗長なコードが発生します。公式の推薦だけでは使用しない、両方の組み合わせを使用することです。

postcssとAutoprefixer

postCSSは、プロジェクトのルートディレクトリにpostcss.config.jsを設定する必要がありますので、個別の設定ファイルを持っている必要があり
、これは自動的に、Autoprefixerブラウザが自動的にプロパティの人気と支持を得る接頭Autoprefixerの使用を追加するプラグインと組み合わせることができますこれらのデータとヘルプに基づいて自動的にCSSルールにプレフィックスを追加します。これは、最も広くpostCssシナリオです。まずAutoprefixerは、コマンドコードをインストールし、次のようにされた取付：

npm install autoprefixer  --save-dev

次のようにpostcss.config.js添加autoprefixerでは、構成コードは、次のとおりです。

const autoprefixer = require('autoprefixer')
module.exports = {
  parser: 'sugarss',
  plugins: {
    'autoprefixer': {
      flex: true,
      browsers: [
        '> 1%',
        'last 3 versions',
        'android 4.2',
        'ie 8'
      ]
    }
  }
}

私たちは、機能が（例えば、グリッドのような）サポートと、ブラウザ（ブラウザ）互換autoprefixerする必要が追加することができます。設定が完了すると、我々は新しいCSS機能の一部を使用することができます。以下のような：

.main{
dislay: grid;
}

グリッド構成の開発があること、真実であるために、グリッドの特性はなってコンパイルした後、プレフィックスすなわち追加します。

.main{
display: -ms-grid;
dislay: grid;
}

postcssとcssnext

あなたがアプリケーションの最新のCSSプロパティの構文を使用することができるようにpostcss、cssnextと組み合わせて使用すること。
ホームNPM使用コマンドラインインストール：

npm install postcss-cssnext --save-dev

次いで、適切な構成posts.config.jsコードに加え、以下の通りであります：

const postcssCssnext = require('postcss-cssnext')
module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcssCssnext': {

      browsers: [
        '> 1%',
        'last 2 versions'
      ]
    }
  }
}

あなたがサポートされているブラウザが必要であることを指定した後、私たちはスムーズにCSSNextの特性を利用することができます。PostCSSは、私たちは性質やフォームを受け入れるようにブラウザのCSSNext構文を翻訳するのに役立ちます。次のコード例：

/** main.css **/
:root {
	--highligtColor: hwb(190, 35%, 20%);
}
body {
	color: var(--highlightColor)
}

次のようにパッケージのコンパイル結果は以下のとおりです。

body {
	color: rgb(89, 185, 204)
}

postcssとstylelint

stylelintたちは、統一コードスタイルのプロジェクトにそのルールの様々なを追加することができ、高いコードの品質を確保するために、ツールのCSSコードの品質テストです。
次のようにホームは、最初のコマンドラインインストールstylelintコードであります：

npm install stylelint --save-dev

postcss.config.js構成コードは次のとおりです。

const stylelint = require('stylelint')
module.exports = {
  plugins: {
    'stylelint': {
      config: {
        rules: {
          'declaration-no-important': true
        }
      }
    }
  }
}

ここでは、「重要！」で私たちのコードが表示され、警告を与える宣言-NO-重要なルールを、追加します。次のコード例：

/** a.scss**/
$base-color: red;

html {
  body{
    color: $base-color !important;
  }
}

示すような結果をパッキング：
ここに画像を挿入説明
それは警告を見ることができます。
使用stylelintは、私たちは、より安全でより一貫性のあるスタイルのコードを書くため、コード内の問題パターン（構文エラー、重複した属性など）を検出することができます。

CSSモジュール

CSSモジュールのモジュラーターミネーターのCSSを使用すると、長いリスト上で最も重要な名などとして、あまりにも人気によって引き起こさ名前の競合を心配する必要はありませんことを、グローバルです。
CSSのモジュール性は、近年では他の言語のような開発者のCSSは、独自のモジュールスコープを持つ、CSSはまた、モジュール式の機能を持ってみましょうことができます開発モデルより人気があります。

各CSSスタイルファイルは別々のスコープ、名前の競合が発生しないと外の世界を持っています。
CSSの依存関係の管理、CSSファイルは、相対パスで導入することができます。
CSSモジュールは、簡単に他の構成で再利用することができます。

使用CSSモジュールは、他のコンポーネントをインストールする必要はありません、あなただけのCSS-ローダーを設定する必要があります。
次のように構成されたコンフィギュレーションウェブpack.config.js：

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            modules: {
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
        }]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              [
                'env', {
                  modules: false
                }
              ]
            ]
          }
        }
      }
    ],
  }
}

私たちはmodules.localIdentName構成が可能設定する必要があります

[名前]はモジュール名が、ここで交換されたスタイルを指します。
[ローカル]元choice識別子を参照するには、ここではそれがタイトルに置き換えられます。
[ハッシュ：BASE64：5]は、5ビットのハッシュ値を参照し、ハッシュ値は、モジュール名と識別子に基づいて算出され、同じパターンで異なるモジュールの識別子は、衝突を引き起こしません。
次のようにCSのコードは次のようになります。

/** style.css**/
.tit {
  color: #ff0000;
}

// index.js
import style from  './style.css';
document.write(`<p class="${style.tit}">hello webpack2</p>`);

コードは.style__tit-Vp6X7を見つけるために、クラスにコンパイルされた後、私は、JS、CSSファイルに直接インポートの導入を導入する前に、名前を定義する必要はありませんが、このCSS CSSのモジュールは、必要がオブジェクトを定義する際に導入され、参照、私たちにしてコンパイルされたクラス名が一致すると、最終的なHTMLのCSSクラス。
示すような結果を操作します：
ここに画像を挿入説明

要約：

あなたと共有今日はWebPACKのと併せて使用postcss含むpostcss、主に関連している、autoprefixer自動的に接頭辞、stylelint検出コード、CSSのモジュールなどを追加します。不備、またしてくださいアドバイスがある場合、これは、ビューの単なる個人的なポイントです。あなたがもっと知りたい場合は、以下のQRコードをスキャンしてください。
ここに画像を挿入説明

フロント蘭風水ブログの専門家

公開された248元の記事・ウォンの賞賛130 ・ビュー440 000 +

彼のメッセージボードの懸念