Webpack Lessファイルを使用した構成

Lessファイルもスタイルファイルであり、CSSファイルと同様に使用する場合もwebpackを構成する必要があります.構成手順は次のとおりです.

cssフォルダにspecialを作成する.lessファイル、フォントサイズとフォント色を変更する

//    
@fontSize: 40px;
@fontColor: white;

body {
  font-size: @fontSize;
  color: @fontColor;
}

jsエントリファイルでlessファイルを参照し、ページにコンテンツ

を表示する.

require('./css/special.less');
document.writeln('
Lessファイルの  
');

lessファイルを使用する前にless-loaderをインストールし、コマンド:npm install less-を入力する必要があります[email protected] --save.注意less-loaderのバージョンは4.1.0以下でなければなりません.高バージョンはパッケージ化時に

とエラーが発生します.

webpack.config.jsファイルのrulesに以下の内容を追加します

  //   less  
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      }

プロジェクトをパッケージ化した結果、ページに表示され、lessファイルは

を正常に表示できます.