Webpack 2：SASS主题与Angular

Question

Webpack 2.2.1，Angular 2.4.7。

我使用SASS创建了一个包含多个主题的网站，但一直没有能够让Webpack为每个主题创建单独的CSS文件。 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 

的WebPack配置

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文件作为切入点：

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') 
} 

它创建单独的文件，但他们每个人是另一个的副本，所以ThemeA.css，ThemeB。 css和ThemeC.css都包含ThemeA.css的内容。

2：导入根app.module.ts中的每个主题。这只是将文件捆绑到一个CSS文件中。

3：为每个主题创建一个ExtractTextPlugin实例。这也会创建具有重复内容的文件，类似于＃1。

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

Answer 1

您可以使用您的WebPack的配置节多的正则表达式匹配，而不是只具有单一extracttext条目：

首先把这个在的WebPack配置的顶部：

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

然后在配置中：

{ 
    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 
    ... 
]