Angularjs 网页包2：带角度的SASS主题

第2.2.1页，第2.4.7页

我正在使用SASS创建一个具有多个主题的网站，但还无法使用Webpack为每个主题创建单独的CSS文件。ExtractTextPlugin很有希望，因为它为每个入口点创建了一个单独的CSS文件，但不是我需要的特定于主题的文件。有没有办法将每个ThemeX.scs输出为类似/themes/ThemeX.css的内容？注意，主题的命名不同，但为了简洁起见，我使用了类似ThemeA.css的名称。它们实际上是Sales.css、enginers.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文件设置为入口点：

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

---

您可以在网页的“配置”部分使用多个正则表达式匹配，而不仅仅是一个extracttext条目：

首先将其放在网页包配置的顶部：

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

---

这让我走上了正确的道路。我没有使用excludes（这将是一场噩梦，因为我有5个以上的主题），而是将测试设置为匹配每个主题。然后我必须包含HtmlWebPackExcludeAsetsPlugin，以防止HtmlWebpackPlugin为每个主题创建链接元素。

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