Webpack 2 : SASS 테마, 각도

Question

Webpack 2.2.1, 각도 2.4.7.

나는 SASS를 사용하여 여러 테마를 가지고 있지만 각 테마에 대해 개별 CSS 파일을 만들도록 Webpack을 얻을 수없는 사이트를 만들고 있습니다. ExtractTextPlugin은 각 엔트리 포인트에 대해 별도의 CSS 파일을 만들지 만 필요한 특정 테마가 아닌 약속을 보여줍니다. 각 ThemeX.scss를 /themes/ThemeX.css와 같은 것으로 출력 할 수있는 방법이 있습니까? 테마의 이름은 다르게되어 있지만, 간결하게하기 위해 ThemeA.css와 같은 이름을 사용하고 있습니다. 그들은 실제로 Sales.css, Engineers.css, 것 등을 테마

예 디렉토리 구조는 다음과 같습니다

src/assets/styles/themes/ThemeA/ThemeA.scss 
src/assets/styles/themes/ThemeB/ThemeB.scss 

웹팩 설정

const extractThemePlugin = new ExtractTextPlugin("themes/[name].css"); 

{ 
    test: /\.scss$/, 
    include: helpers.root('src/assets/styles/themes'), 
    use: extractThemePlugin.extract({ 
     fallback: "style-loader", 
     use: ["css-loader", "sass-loader"] 
    }) 
} 

plugins: [ extractThemePlugin, ...and others ] 

---

것들 시도했습니다.

1 : 진입 점으로 ThemeX.scss 파일의 각 설정 :

개별 파일을 생성하지만 그들 각각의 ThemeA.css, ThemeB 때문에, 다른 사본입니다

entry: {    
    'main': './src/main.browser.ts', 
    'themeA': helpers.root('src/assets/styles/themes/themeA/themeA.scss'), 
    'themeB': helpers.root('src/assets/styles/themes/themeB/themeB.scss') 
} 

. css와 ThemeC.css 모두 ThemeA.css의 내용을 포함합니다.

2 : 루트 app.module.ts에서 각 테마 가져 오기. 이것은 단지 파일들을 하나의 CSS 파일로 묶어줍니다.

3 : 각 테마에 대해 ExtractTextPlugin 인스턴스를 만듭니다. 또한 # 1과 비슷한 내용으로 중복 된 파일을 만듭니다. 그런 다음

let extractTheme1 = new ExtractTextPlugin('theme1.css'); 
let extractTheme2 = new ExtractTextPlugin('theme2.css'); 

:

먼저 웹팩 설정의 상단에 이것을 넣어 :

const extractThemeAPlugin = new ExtractTextPlugin("themes/themeA.css"); 
const extractThemeBPlugin = new ExtractTextPlugin("themes/themeB.css"); 

Answer 1

당신은 단지 하나의 extracttext 항목을 갖는 대신 웹팩의 설정 섹션에서 여러 정규식 일치를 사용할 수 있습니다 구성 :

{ 
    test: /\.scss$/i, 
    exclude: [ 
     /theme2\.scss$/i 
    ], 
    use: [extractTheme1.extract('css-loader'), 
     'css-loader', 
     'sass-loader' 
    ] 
}, 

// SCSS Loader 
{ 
    test: /theme2\.scss$/i, 
    use: [extractTheme2.extract('css-loader'), 
     'css-loader', 
     'sass-loader' 
    ] 
}, 

및 플러그인 섹션 :

plugins: [ 
    ... 
    extractTheme1, 
    extractTheme2 
    ... 
]