Webpack
The build system for Lore
The build system for Lore
Webpack is configured with support for CSS, LESS and SASS.
In development, these styles will be injected into the page dynamically, which means that Webpack can hot reload changes to the styles without having to refresh the page. The downside of doing this is that the application won't have any styles until the JavaScript loads, which can lead to a flash of unstyled content.
In production, the styles will be extracted into a dedicated css file, and injected into the final index.html file, which will prevent this from occuring.
The styles are also configured to use postcss to automatically inject browser vendor prefixes, which you can read more about here.
This section of the Webpack config that controls this behavior is shown below:
{
test: /\.css/,
use: ifProduction(ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
}), [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
])
},
{
test: /\.less$/,
use: ifProduction(ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader',
'less-loader'
]
}), [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader',
'less-loader'
])
},
{
test: /\.scss$/,
use: ifProduction(ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader',
'sass-loader'
]
}), [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader',
'sass-loader'
])
},