我正在尝试使React应用程序成为主题。现在,主题只包含不同的sass变量集,这些变量定义了不同的标题颜色等。如何使用webpack提取多个主题样式表?
从我目前的理解来看,ExtractTextPlugin
似乎是我最好的选择,因为我不希望我的样式被内联,而是分开每个主题的文件。
所以我创建了两个主题:
src/scss/themes/theme-a.scss
src/scss/themes/theme-b.scss
的主题导入的基本布局和常见的样式和覆盖相关的变量。
但是我设法让的WebPack创建单独的CSS文件 两个主题的唯一办法是在 每个主题制作不同的入口点我webpack.prod.config
:
entry: {
app: './src/js/init.js',
theme-a: './src/scss/themes/theme-a.scss',
theme-b: './src/scss/themes/theme-b.scss'
},
但增加了对每一个新的切入点新增加的主题感觉不对,我认为必须有更好的方法?
嗯,我相信你需要在'plugins'参考,类似'新ExtractTextPlugin( 'CSS/bundle.css')'。我没有看到人们把这些介绍入口。我只将CSS分隔成单个文件,但在这里查看,他似乎在示例中提取了2个文件(不管是css还是更少):https://github.com/webpack/extract-text-webpack-plugin#api – lux
嗯,但添加多个插件实例而不是多个条目听起来不太舒服。如果可以告诉插件它为每个在特定的源/文件夹中遇到的scss文件分离出一个单独的css文件,那该多好。 – arie