生成具有内联样式的静态HTML，并使用webpack提取CSS

Question

我正在尝试使用webpack将以下插件全部组合在一起。

• StaticSiteGeneratorPlugin
• CSS模块，使用css-loader
• （ExtractTextPlugin）

我通常想要实现的是使用带有香草JS和嵌入式CSS的CSS模块创建静态HTML文件。我还可以使用单独的CSS文件，其中每个文件都具有与生成的HTML相同的名称，仅包括特定的CSS。

给出了以下简化的JS文件。

template.js

import styles from './styles.scss';
export default `
    <div class="${styles.title}">
        Foo
    </div>

    <style>
        ${require('./contact-card.component.scss')}
    </style>
`;

index.js // webpack入口点

import template from './components/template';
export default function() {
    return {
        './components/template.html' : template
    }
}

使用这个星座，我可以实现带有提取了CSS文件的CSS模块，这些CSS文件只能由入口点命名并处理整个CSS，或者通过require()内联CSS而没有CSS模块。

这是我到目前为止使用的2个webpack配置。

用于内联CSS

// rules ...
test: /\.scss$/,
  use: [{
    loader: 'css-loader/locals',
    options: {
      modules: true,
      localIdentName: '[name]__[local]--[hash:base64:5]',
    }
  }, {
    loader: 'sass-loader'
  }],
// plugins ...
plugins: [
  new StaticSiteGeneratorPlugin(),
]

用于提取的CSS

use: extractLocalCSS.extract({
  fallback: 'style-loader',
  use: [{
    loader: 'css-loader',
    options: {
      modules: true,
      localIdentName: '[local]--[hash:base64:5]'
    }
  }, {
    loader: 'sass-loader'
  }]
})
plugins: [
    new ExtractTextPlugin('components/[name].css')
]