Webpack 4構成scss Loader

18132 ワード

1.scss Loaderの構成
SCSSはCSSをより柔軟に書くことができます.CSSプリプロセッサで、構文はCSSと似ていますが、変数、論理、などのプログラミング要素が加わっています.SCSSはSASSとも呼ばれ、SASSの文法はRubyに似ているが、SCSSの文法はCSSに似ており、CSSに詳しいフロントエンドエンジニアにとってはSCSSが好きだ.
SCSSを使用すると符号化効率が向上しますが、SCSSソースコードをブラウザ環境で直接実行できるCSSコードにコンパイルする必要があります.SCSS公式には様々な言語で実装されたコンパイラが提供されており、本書はフロントエンドエンジニアが使用するテクノロジースタックに傾いているため、主にnode-sassを紹介します.
Node-sassコンパイラコアモジュールはC++で作成され、Node.jsは他のノードに供給するために1層パッケージされている.js呼び出し.
新規プロジェクト

|-- package.json
|-- src
|   |       `-- common.js
|   |       `-- index.html
|   |       `-- main.scss
|           `-- main.js
`-- webpack.config.js

package.json

{
  "name": "testcssloader",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "liujun",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.6"
  }
}

1.scriptsプロパティには3つのスクリプトが記述されています.devに対応するスクリプトは構築テスト版です.ビルドに対応するスクリプトはパブリケーションの構築です
2.開発はstyle-loader css-loader node-sass sass-loader webpack webpack-cliに依存
webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /\.scss$/, 
        //   :use       loaders。  3          3 2 1
        use: [
          // 1.          
          'style-loader',
          {
            loader: 'css-loader',
            // 2. css-loader    
            options: {
              url: true,
              import: true
            }
          },
          // 3.  sass   
          'sass-loader'
        ], 
      }
    ]
  }
};

use受信にはが格納され、useの別名はloadersである.上のuseは3つのローダを受信し、ローダの実行順序はsass-loader->css-loader->style-loaderです.
main.scss

//      scss    ，       
$color: pink;
body {
  background-color: $color;
}

main.js

// 1.   CommonJS      showHelloWorld   
const showHelloWorld = require('./common.js');
// 2.   showHelloWorld   
showHelloWorld('Webpack      ');
// 3.   CommonJS      SCSS   
require('./main.scss');

index.html

<html>
<head>
  <meta charset="UTF-8">
head>
<body>
<div id="app">div>

<script src="../dist/bundle.js">script>
body>
html>

Webpackと使用するloaderをローカルにインストール

npm install [email protected]  --save-dev
npm install [email protected]  --save-dev
npm install [email protected]  --save-dev
npm install [email protected]  --save-dev

npm install [email protected]  --save-dev   //   scss     css
npm install [email protected]  --save-dev  //    scss   ， scss    commonjs

プロジェクトのルートディレクトリで、スクリプト構築プロジェクトを実行します.npm run dev
パッケージ後に出力された結果

|-- dist
|   |-- bundle.js
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.scss
|   `-- main.js
`-- webpack.config.js

パッケージされたindex.htmlファイルの一部:

<html><head>
  <meta charset="UTF-8">
<style type="text/css">body {
  background-color: pink; }
style>head>
<body>
<div id="app">div>

<script src="../dist/bundle.js">script>

body>html>

まとめ:
上だconfig.js構成のuseは、正則/\.scss$/を介して.scssを接尾辞とするすべてのSCSSファイルをマッチングし、それぞれ3つのLoaderを使用して処理する.具体的な処理の流れは以下の通りである.

sass-loaderによってSCSSソースコードをCSSコードに変換し、CSSコードをcss-loaderに渡して処理する.

css-loaderはCSSコードの@importとurl()のようなインポート文を見つけて、Webpackにこれらのリソースに依存していることを伝えます.CSS Modules、圧縮CSSなどの機能もサポートしています.処理が終わったらstyle-loaderに結果を渡して処理します.

style-loaderはCSSコードを文字列に変換してJavaScriptコードに注入し、JavaScriptでDOMにスタイルを追加します.JavaScriptではなくCSSコードを別のファイルに抽出したい場合は、ExtractTextPluginプラグインを使用できます.

tmuxのlaunchctlエラー対策

4 Ruby等級別テーマ