梱包と分別を減らすにはどうすればよいですか?レス包装・分別方法のご紹介

この記事では、荷物を減らして分別する方法について説明します。梱包方法や分別方法などを紹介していますので、困っている方の参考になれば幸いです。

lessをパッケージ化して分離する

1.lessサービスをインストールします

npm install –save-dev less

2. パッケージ化するためにless-loaderをインストールします

npm install –save-dev less-loader

4. src/indexに

{   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       }]
}

5を挿入します。 html 、 src/css/ ディレクトリに black.less ファイルを書き込みます

<p id="lessLearn"></p>
<p><img src="./images/10.jpg"/></p>
<p id="pic"></p>
<p id="title"></p>

6. src/entry.js にlessを導入します

@base:#000;#lessLearn{    width:300px;
    height:200px;
    background-color:@base;}

7. dist ディレクトリを削除し、パッケージ化に成功したら webpack を入力します。 dist/css/index.css には #lessLearn スタイルがありません (==js== にパッケージ化されています)

8. npm run サーバーの実行結果

package.json のスクリプトでサーバーに –open を追加できます。と、ブラウザがこのページを自分で開きます

"server": "webpack-dev-server –open",

9. エントリ内で js とlessを分離したい場合は、webpack-config.js

import less from ‘./css/black.less’

のモジュールの下でless設定の使用を変更する必要があります。

次のように変更します。

10. dist フォルダーを削除し、webpack でパッケージ化すると、dist/css/index.css にless のスタイル定義が表示されます (つまり、css と js を分離します)

11. npm run build を備えたブラウザー

関連する推奨事項:

CSS で画像を引用するにはどうすればよいですか? CSS で画像を参照する方法

CSS ファイルをパッケージ化するには? CSS ファイルをパッケージ化する方法

以上が梱包と分別を減らすにはどうすればよいですか?レス包装・分別方法のご紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。