웹팩 패키징 CSS에 오류가 있는 경우 어떻게 해야 할까요?

webpack CSS 패키징 오류 해결 방법: 1. webpack2의 사용 구문을 "-loader"로 수정합니다. 2. "style-loader"를 추가합니다. 3. "style-loader!css-loader;"로 순서를 수정합니다.

이 기사의 운영 환경: windows7 시스템, webpack2.0&&css3 버전, Dell G3 컴퓨터.

문제: webpack이 성공적으로 패키징되었지만 CSS 오류가 발생하고 CSS가 작동하지 않습니다.

문제 분석/해결 방법: 이유는 다음과 같습니다.

webpack2의 구문 규칙이 잘못되었습니다.

가능 css-loader만 작성하고 style-loader는 작성하지 않습니다.

순서는 반대이므로 style-loader로 작성해야 합니다!css-loader;

확장:

Q: style-loader나 CSS라면 어떨까요? -loader가 작성되지 않으면 어떻게 되나요?

답변:

style-loader를 작성하지 않으면 빌드 파일이 생성되지만 페이지의 js가 작동하지 않는 것을 발견하게 됩니다. CSS-로더를 작성하지 않으면 '이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있습니다.'라는 오류가 직접 보고됩니다.

Q: 스타일 로더와 CSS-로더의 기능은 무엇입니까?

답변:

스타일 로더가 작동하지 않고 오류를 보고하지 않는다는 사실은 그 기능이 인터넷의 답변과 결합된 DOM 요소에 스타일을 삽입하고 미리보기 페이지를 관찰하는 것임을 의미합니다. 우리는 스타일 로더가 페이지의 헤더 태그에 있을 것이라는 것을 발견했습니다. 내부 ;

　css-loader는 웹팩 빌드 프로세스에 영향을 주기 때문에 오류를 보고합니다. 온라인 공유 및 '이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있습니다.' 오류 메시지와 결합하면 css-loader가 있으면 require 또는 import를 통해 js에 CSS를 성공적으로 도입할 수 있음을 의미합니다. js 파일로 구현할 수 있습니다. require를 통해 CSS를 소개합니다.

내 구성 파일

const webpack = require('webpack');
const path = require('path');
module.exports = {
   entry: {
       'bundle': './a.js',
   },
   output: {
       path: path.resolve(__dirname, 'build'),
       filename: '[name].js',
       chunkFilename: '[name].js'
   },
   module: {
       loaders: [
           {
               test: /\.css$/,
               loader: 'style-loader!css-loader'
           },
           {
               test: /\.js[x]?$/,
               exclude: 'node_modules/',
               loader: 'babel-loader'
           }
       ]
   },
 plugins: [
  ]
};

추천: "

css 비디오 튜토리얼

"

위 내용은 웹팩 패키징 CSS에 오류가 있는 경우 어떻게 해야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!