로더 패키지 스타일
우리가 SRC에서 스타일 파일을 작성하고하는 index.js에서 파일을 도입 스타일을 사용할 때 오류 FOUND를 실행
import './index.css'
......
img.classList.add('image')
이 웹팩은 JS 파일의 끝을 인식하기 때문에, CSS는 모듈의 끝을 인식하고 패키징 오류 때문에하지 않는 것입니다. 그것은 구성 webpack.config.js에서 수행 할 필요가
, 배열되기 위해 우리가 CSS를 포장 할 때 사용의 대상이 될 수 없다, 그래서 필요,이 로더를 사용하는
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
이 개 패키지는 명령 행, CSS 로더에서이 스타일 로더 설치 npm install style-loader css-loader -D
후 NPM 실행 번들 패키지가 성공적으로 포장하는
스타일 로더, CSS - 로더의 역할은 무엇인가
CSS 로더 우리가 몇 CSS 파일을 분석하는 데 도움이됩니다 사이의 관계는 결국 일부 CSS를 CSS로이 파일을 병합 할 수 있습니다.
효과 스타일 로더의 CSS CSS 로더 제작 콘텐츠 후 얻어진 스타일 로더는이 페이지의 컨텐츠의 헤드 부분에 장착되고
탭이 스타일 로더 상에 장착된다. 함께 사용하는 스타일 로더 작업과 포장 CSS 파일, CSS를 사용 로더를 다루는 때, 그것을 어떻게
때때로 우리는 파일에 CSS를 사용하지 않지만, 용도 이하, 말대꾸, 스타일러스 등-CSS를 사전 어떻게 그것을 할 수 있나요?
우리는 사스의 형태의 스타일을 변경합니다
body {
.image {
width: 150px;
height: 150px;
}
}
다음에 통합하는 index.js import './index.scss'webpack.config.js에서 종료하는 SCS의 구성을 변경,
{
test: /\.scss$/,
use: ['style-loader', 'css-loader']
},
성공적으로 실행할 수 있지만 페이지에 작동하지 않았다.
머리가 CSS 구문,하지만 원래 말대꾸 문법 아니다에서는 브라우저가 인식하지 못하는
우리가하는 SCS 파일 팩을 갔을 때 그것을, 그것은 CSS 구문에 다른 로더 문법 말대꾸로 변환해야, 우리는 sass-를 사용하려면 장 전기
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
설치 말대꾸 로더는 노드 말대꾸를 설치해야하기 때문에이 작업은 불평 npm install sass-loader node-sass -D
이 설치
하는 SCS의 엔드 로더에 위의 구성 파일에서 볼 수있는 세 가지 구성이 있습니다
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
웹팩 구성 내부에서, 로더는 아래에서 위로 순차적 그렇게하는하는 SCS 파일을 팩 가서 처음 CSS로 번역 말대꾸 로더, 말대꾸 번역의 코드를 수행, 왼쪽에서 오른쪽에있다 코드가 CSS 로더에게 주어진 후, 과정 후에 좋은 스타일 로더를 제공하고, 마지막 페이지에 매달려입니다.
우리는 페이지 때의 새로운 CSS 구문을 사용하는 경우
body {
.image {
width: 150px;
height: 150px;
transform: translate(100px, 100px)
}
}
새로운 기능을 쓰기 CSS3, 일반적인 접두사는 -webkit-변환, 제조 업체를 나타 내기 위해, -m하고있는 우리가 이것을 달성하는 데 도움이됩니다 다른 로더가, CSS는 이들 기업이 더 문제가 될 것 접두사를 작성하는 같은 자동차 제조 업체, 로더 로더가 postcss의 호출되는 접두사 기능 추가
사용 postcss 로더
NPM 난 -D postcss-로더 : 첫 번째 설치
설치 npm install autoprefixer -D
에 일부 구성이 수행 디렉토리 생성 postcss.config.js 프로파일을
module.exports = {
plugins: [
require('autoprefixer')
]
}
이 참조 또는 postcss 로더를 사용할 수 있도록 포장하는 경우 postcss 로더는 플러그인 사용 autoprefixer로 이동 프로젝트 실행, 구성 파일 postcss.config.js을 가지고
보기 페이지의 스타일을
다 웹킷 접두사 제조 업체에 자동으로 접두사는,이 postcss이 autoprefixer 해당되는이 플러그인은 접두사 추가 벤더
많은 공식 웹 사이트를 참조 할 수 있습니다 특정 사용을.
