Webpack Lessファイルを使用した構成
3188 ワード
Lessファイルもスタイルファイルであり、CSSファイルと同様に使用する場合もwebpackを構成する必要があります.構成手順は次のとおりです. cssフォルダにspecialを作成する.lessファイル、フォントサイズとフォント色を変更する jsエントリファイルでlessファイルを参照し、ページにコンテンツ を表示する. lessファイルを使用する前にless-loaderをインストールし、コマンド:npm install less-を入力する必要があります[email protected] --save.注意less-loaderのバージョンは4.1.0以下でなければなりません.高バージョンはパッケージ化時に とエラーが発生します. webpack.config.jsファイルのrulesに以下の内容を追加します プロジェクトをパッケージ化した結果、ページに表示され、lessファイルは を正常に表示できます.
//
@fontSize: 40px;
@fontColor: white;
body {
font-size: @fontSize;
color: @fontColor;
}
require('./css/special.less');
document.writeln('Lessファイルの
');
// 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
}]
}