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 중국어 웹사이트의 기타 관련 기사를 참조하세요!