덜 포장하고 분리하는 방법은 무엇입니까? 덜 포장하고 분리하는 방법 소개

이 기사에서는 덜 포장하고 분리하는 방법에 대한 정보를 제공합니다. 포장 및 분리 방법에 대한 소개는 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

less로 포장하여 분리

1.less 서비스 설치

npm install –save-dev less

2.less-loader를 설치하여 패키지하여 사용

npm install –save-dev less-loader

#. 🎜 🎜#3. 로더 구성:

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

4. src/index.html에

<p id="lessLearn"></p>
<p><img  src="/static/imghwm/default1.png"  data-src="./images/10.jpg"  class="lazy"  / alt="덜 포장하고 분리하는 방법은 무엇입니까? 덜 포장하고 분리하는 방법 소개" ></p>
<p id="pic"></p>
<p id="title"></p>

5를 삽입합니다. css/ 디렉토리.less 파일

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

6. src/entry.js

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

7에 less를 도입합니다. dist 디렉토리를 삭제하고 패키징을 위해 webpack을 입력합니다. 성공, dist/css 확인 /index.css에 #lessLearn 스타일이 없습니다(==js로 패키지됨==)

8 npm 실행 서버의 결과

은 .json의 스크립트에 있는 서버에 Add –open 패키지에서 찾을 수 있으며, 브라우저가 자동으로 페이지를 엽니다

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

9. 항목에서 js와 ​​less를 분리하려면 webpack-config의 모듈에서 less 구성을 수정해야 합니다. .js

use:extractTextPlugin.extract({    use:[{
      loader:'css-loader'
    },{      loader:'less-loader'
    }],    fallback:'style-loader'
  })

수정에 사용합니다:

10 dist 폴더를 삭제하고 webpack으로 패키징하면 dist/에 less 스타일 정의가 표시됩니다. css/index.css (즉, CSS와 js가 분리됨)

11, npm run build 브라우저 실행

관련 권장 사항:

# 🎜🎜#CSS에서 이미지를 인용하는 방법은 무엇입니까? CSS에서 이미지를 참조하는 방법

CSS 파일을 패키지하는 방법은 무엇인가요? CSS 파일 패키징 방법

위 내용은 덜 포장하고 분리하는 방법은 무엇입니까? 덜 포장하고 분리하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!