I am having a problem, that the common sass styles in my reactjs project end up redundantly in the client bundle…
1） I have a set of base styles:
/src/frontend/sass/
base.scss the master file, which imports the following…
├ common.sass
├ colors.sass
├ breakpoints.sass
├ forms.sass
└ ...
2） and a webpack project with '.sass' Files per component…
Input/style.sass
Modal/style.sass
TeaserPage/style.sass
…
3） every component style files get's an '@import base.scss' injected in webpack.config, such that I can access variables, mixins or extend a class...
{
test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader',
{
loader: 'sass-loader',
options: {
data: `@import '${resolve(__dirname, 'src', 'frontend', 'sass').replace(/\\/g, '/')}/base';`,
sourceMap: false
}
}
]
})
},
这对于开发来说都很好（使用 react-hot-loader ），但在发布模式下，当我想构建一个紧凑的客户端捆绑包时，这会导致40倍的冗余（......来自40个组件） .
问题是→certainly →not →new，仍然是webpack 3的正确解决方案？
-
Concatenation first, processing then?
-
A (working, non-outdated) import-once module?
-
(terrible workaround): keeping variables/mixins vs. base styles separate （这会将表格或断点撕成碎片）
-
or could I somehow do a webpack config like...?
（如果我正确理解webpack语法，请阅读↑自下而上↑...）
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader',
3) do your sass→css conversion and post thing
{
loader: 'sass-loader',
2) ...load (concatenate to 1) component styles
},
{
loader: 'sass-loader',
1) ...load that base.sass
},
]
})
- ...或者是否有一个非过时的（或者这些天甚至包括在webpack本身？）某个地方的sass-import-once功能？
我找到了optimize-css-assets-webpack-plugin（对于webpack 3，你需要 @3.2.0 ），它可以作为某种修复方式 . 清理最后阶段的混乱，但不是，我宁愿想要的（即：通过首先导入一次/连接来避免创建混乱......） .