apostrophe
Version:
The Apostrophe Content Management System.
71 lines (68 loc) • 2.02 kB
JavaScript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const postcssViewportToContainerToggle = require('postcss-viewport-to-container-toggle');
module.exports = (options, apos, srcBuildNames) => {
const postcssPlugins = [
...apos.asset.options.breakpointPreviewMode?.enable === true
? [
postcssViewportToContainerToggle({
modifierAttr: 'data-breakpoint-preview-mode',
debug: apos.asset.options.breakpointPreviewMode?.debug === true,
transform: apos.asset.options.breakpointPreviewMode?.transform || null
})
]
: [],
'autoprefixer',
{}
];
return {
module: {
rules: [
{
test: /\.s[ac]ss$/,
use: [
// Instead of style-loader, to avoid FOUC
MiniCssExtractPlugin.loader,
// Parses CSS imports and make css-loader ignore urls.
// Urls will still be handled by webpack
{
loader: 'css-loader',
options: { url: false }
},
// Provides autoprefixing
{
loader: 'postcss-loader',
options: {
sourceMap: true,
postcssOptions: {
plugins: [ postcssPlugins ]
}
}
},
// Parses SASS imports
{
loader: 'sass-loader',
options: {
sassOptions: {
silenceDeprecations: [ 'import' ]
}
}
}
],
// https://stackoverflow.com/a/60482491/389684
sideEffects: true
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Should be automatic but we wind up with main.css if we try to go
// with that
filename: ({ chunk }) => {
return srcBuildNames.includes(chunk.name)
? '[name].css'
: '[name]-bundle.css';
}
})
]
};
};