Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
rules: [{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules/,
use: 'babel-loader',
}, {
test: /\.(css|scss)$/,
include: [
// CSS modules should only be generated from css/scss files within the src directory
path.resolve(app_root, 'src'),
// Global stylesheets in the static directory do not generate modules
path.resolve(project_root, 'static'),
],
use: [
// When MiniCssExtractPlugin becomes stable and supports all options, convert if needed
ExtractCssChunks.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
importLoader: 1,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
getLocalIdent: (loaderContext, localIdentName, localName, options) => {
// Everything that comes from our global style folder and node_modules will be in global scope
if (/styles-src|node_modules/.test(loaderContext.resourcePath)) {
return localName;
}
return getLocalIdent(loaderContext, localIdentName, localName, options);
},
},
export default function({ stage, isNode }) {
let cssLoader = initCSSLoader()
if (stage === 'node' || isNode) {
return {
test: /\.css$/,
loader: cssLoader,
}
}
cssLoader = [
{
loader: ExtractCssChunks.loader,
options: {
hot: true,
},
},
...cssLoader,
] // seeing as it's HMR, why not :)
return {
test: /\.css$/,
loader: cssLoader,
}
}
cssLoaderOptions
)
}
// When not using css modules we don't transpile on the server
if (isServer && !cssLoader.options.modules) {
return ['ignore-loader']
}
// When on the server and using css modules we transpile the css
if (isServer && cssLoader.options.modules) {
return [cssLoader, postcssLoader, ...loaders].filter(Boolean)
}
return [
!isServer && ExtractCssChunks.loader,
cssLoader,
postcssLoader,
...loaders
].filter(Boolean)
}
],
},
{
exclude: /node_modules/u,
test: /\.css$/u,
use: [
mode === 'dev'
? {
loader: 'style-loader',
options: {
hmr: true,
sourceMap: true,
},
}
: {
loader: ExtractCssChunks.loader,
options: {
hot: false,
reloadAll: false,
},
},
{
loader: 'css-loader',
options: {
// eslint-disable-next-line no-magic-numbers
importLoaders: 2,
sourceMap: false,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
ident: 'postcss',
plugins: () => [
postcssFlexbugsFixes,
autoprefixer({
flexbox: 'no-2009',
}),
],
},
}
if (stage === 'dev') {
// Dev
loaders = [
{
loader: ExtractCssChunks.loader,
options: {
hot: true,
},
},
cssLoader,
postCssLoader,
lessLoader,
]
} else if (stage === 'node') {
// Node
// Don't extract css to file during node build process
loaders = [cssLoader, postCssLoader, lessLoader]
} else {
// Prod
// for legacy css-loader version (<2.0) we need to add "minimize" to minify css code
'not ie < 9' // React doesn't support IE8 anyway
]
})
]
}
};
appConfig.module.rules.push({
test: /\.(sa|sc)ss$/,
use:
isServer ? [
cssLoader,
postCSSLoader,
sassLoader,
] : [
dev ? 'style-loader' : ExtractCssChunks.loader,
cssLoader,
postCSSLoader,
sassLoader,
],
});
if (!isServer && !dev) {
appConfig.plugins.push(
new ExtractCssChunks({
allChunks: true,
filename: dev ? '[name].module.css' : '[name]-[hash].module.css',
chunkFilename: dev ? '[id].css' : '[id]-[hash].css',
hot: dev, // if you want HMR - we try to automatically inject hot reload
orderWarning: true, // Disable to remove warnings about conflicting order between imports
reloadAll: true, // when desperation kicks in - this is a brute force HMR flag
cssModules: true, // if you use cssModules, this can help.
]
} else if (stage === 'node') {
// Node
// Don't extract css to file during node build process
loaders = [cssLoader, postCssLoader, sassLoader]
} else {
// Prod
// for legacy css-loader version (<2.0) we need to add "minimize" to minify css code
// for >2.0 it is handled with https://github.com/NMFR/optimize-css-assets-webpack-plugin
const cssLoaderVersion = require('css-loader/package.json').version
if (semver.satisfies(cssLoaderVersion, '<2') === true) {
cssLoader.options.minimize = true
}
loaders = [ExtractCssChunks.loader, cssLoader, postCssLoader, sassLoader]
}
config.module.rules[0].oneOf.unshift({
test: /\.s(a|c)ss$/,
use: loaders,
})
if (
config.optimization.splitChunks &&
config.optimization.splitChunks &&
config.optimization.splitChunks.cacheGroups.styles
) {
config.optimization.splitChunks.cacheGroups.styles.test = /\.(c|sc|sa)ss$/
}
return config
importLoaders: 1,
minimize: stage === 'prod',
sourceMap: false,
},
}
if (stage === 'dev') {
// Dev
loaders = [styleLoader, cssLoader, sassLoader]
} else if (stage === 'node') {
// Node
// Don't extract css to file during node build process
loaders = [cssLoader, sassLoader]
} else {
// Prod
loaders = [ExtractCssChunks.loader, cssLoader, sassLoader]
}
config.module.rules[0].oneOf.unshift({
test: /\.s(a|c)ss$/,
use: loaders,
})
return config
},
})
test: /\.json/,
loader: "json-loader",
exclude: /node_modules/,
},
{
test: /\.less/,
loader: [
"less-loader",
],
exclude: /node_modules/,
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: ExtractCssChunksPlugin.loader,
options: {
hot: hot,
},
},
'css-loader',
"sass-loader",
],
},
{
test: /\.md/,
loader: "raw-loader",
exclude: /node_modules/,
},
]),
},
resolve: {
const MiniCssExtractPlugin = require("extract-css-chunks-webpack-plugin");
const StyleLintPlugin = require('stylelint-webpack-plugin');
const autoprefixer = require('autoprefixer');
const Fiber = require('fibers');
const prod = {
module: {
rules: [
{
test: /\.(css|sass|scss)$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 2,
},
},
{
loader: 'postcss-loader',
options: {
plugins: () => [
autoprefixer({
grid: 'autoplace',
flexbox: 'no-2009'
}),