머리말: Webpack 처리 CSS는 매우 기본적인 주제입니다. 단지 webpack4에서는 CSS 브라우저 호환성 문제를 해결하기 위해 autoprefixer를 사용할 때 이전과 다른 함정이 있을 뿐입니다. 그래서 나는이 지식에 대해 자세히 쓸 것입니다.
1. 필수 종속성
- style-loader: html 페이지의 스타일 태그에 CSS 파일을 삽입합니다. 참고: https://www.webpackjs.com/loa...
- css-loader: js로 가져온 CSS 파일을 구문 분석합니다. 참고: https://www.webpackjs.com/loa...
- less-loader: CSS 전처리 언어를 구문 분석하는 경우 해당 로더를 사용해야 합니다. 참고: https://www.html.cn/doc/webpa...
-
postcss-loader: 프로젝트에서 작성한 CSS를 후처리:
- CSS를 다음에서 작동할 수 있는 추상화로 구문 분석합니다. JavaScript 구문 트리 구조(Abstract Syntax Tree, AST),
- 플러그인을 호출하여 AST를 처리하고 결과를 얻습니다.
- autoprefixer: 다양한 브라우저에 맞게 CSS 앞에 접두사를 붙이는 postcss-loader용 플러그인입니다.
참고: postcss-loader는 영화 및 TV 후반 제작 프로세스와 같은 기능을 하며 모든 원본 파일을 결합한 다음 플러그인을 사용하여 특수 효과를 추가하고 최종적으로 완성된 제품을 출력합니다. autoprefixer 플러그인은 postcss-loader로 구문 분석된 AST에서 사후 처리를 수행합니다.
둘째, 종속성 설치
npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer
셋, 더 적은 테스트 파일 style.less 생성
#world{
display: flex;
}
넷째, 기본 파일 index.js에 style.less 가져오기
import './style.less';
다섯, 웹팩 구성 파일 webpack.config.js
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader',
{loader: 'css-loader', options: { importLoaders: 1 } },
'less-loader',
'postcss-loader'
]
},
]
}
css-loader의 importLoaders: 1은 매우 중요한 설정입니다. 이렇게 하면 구문 분석된 모든 CSS가 하나의 스타일 태그에만 삽입됩니다. 이 구성이 없으면 각각의 새 CSS 파일이 삽입될 때 새 스타일 태그가 생성됩니다. 일부 브라우저에서는 스타일 태그 수에 제한이 있습니다.
여섯째, postcss 구성 파일 postcss.config.js를 생성하고 autoprefixer 플러그인을 도입합니다.
module.exports = {
plugins: [
require('autoprefixer')
]
}
일곱째, package.json에 브라우저 목록 browserslist를 추가합니다. 이것이 서문에서 언급한 함정입니다. 그렇지 않으면 autoprefixer가 작동하지 않습니다
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --mode development"
},
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
}
Eight, 명령을 실행하세요
npm run build
Nine, CSS 구문 분석이 성공합니다. 효과는 다음과 같습니다:
#world {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}