각 항목에서 CSS (중괄호 위) CSS를 추출하는 방법은 무엇입니까?

Question

나는 세 페이지에 간단한 다중 페이지 응용 프로그램을 가지고, 내 webpack.config.js처럼 entry 보이는 :

{ 
    entry: { 
    a: 'pages/a.js', 
    b: 'pages/b.js', 
    c: 'pages/c.js', 
    } 
} 

각 페이지가 처음에 배 위에 렌더링 볼 수 있습니다 일부 구성 요소를, 반작용 몇 가지로 구성되며, 그 중 일부는 시야에서 벗어났습니다.

각 페이지/항목에 대해 어떤 구성 요소가 '중요'(fold-over)인지 선언적으로 정의하고 해당 CSS를 별도의 파일로 추출해야합니다. 뭔가 같은 :

{ 
    a: ['compononents/button/style.css', ...], 
    b: ['compononents/title/style.css', ...], 
    c: ['compononents/header/style.css', ...] 
} 

같은 출력 : 나는 extract-text-webpack-plugin 놀아 봤는데,하지만 그것을 말할 수있는 방법을 찾을 수 없습니다

- dist/a.critical.css 
- dist/b.critical.css 
- dist/c.critical.css 

에만 특정 CSS를 추출을 특정 항목의 컨텍스트

---

어떻게하면 특정 항목/페이지의 맥락에서 특정 CSS 파일의 내용을 추출 할 수 있습니까?

Answer 1

저는 같은 상황에 있습니다. 우리 프로젝트는 충분히 커서 20 가지 이상의 중요한 CSS 파일이 필요합니다. 중요한 CSS를 더 쉽게 생성 할 수있는 방법을 찾았습니다. 다른 중요한 css 파일을 만들 수있는 https://github.com/zgreen/postcss-critical-css을 사용하고 있습니다. (또는 중요한 스타일없이) 2 개 중요한 CSS 파일 내 CSS 파일을 - - v2.css을이 당신을 도울 것입니다

희망을 crit.css

@critical crit.css { 
    .head { 
     background: red; 
    } 

    .head .logo { 
     display: block 
    } 
} 

@critical v2.css { 
    .head.v2 { 
     background: green; 
    } 
} 

.main { 
    color: #333; 
} 

.footer { 
    background: black; 
} 

Postcss 중요한-CSS는 3 개 개의 파일을 생성합니다!