How to use the mini-css-extract-plugin.loader function in mini-css-extract-plugin
To help you get started, we’ve selected a few mini-css-extract-plugin examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
jdthfe / eui / scripts / config / getStyleLoader.ts View on Github 
function getStyleLoader(): webpack.RuleSetUse {
return [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [
// postcssFlexbugsFixes,
autoprefixer({
browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 9', 'iOS >= 8', 'Android >= 4'],
}),
pxtorem({
// todo change value
rootValue: 16,
propWhiteList: ['*'],
}),
cssnano({
preset: 'default',use: [
{
loader: require.resolve("babel-loader"),
options: {
cacheDirectory: cacheDir,
presets: [require("@phenomic/babel-preset")],
},
},
],
},
{
test: /\.css$/,
use: [
process.env.PHENOMIC_ENV !== "static"
? "style-loader"
: MiniCssExtractPlugin.loader,
require.resolve("css-loader"),
],
},
],
},
// $FlowFixMe lazy me
plugins: [
process.env.PHENOMIC_ENV === "static" &&
new MiniCssExtractPlugin({
filename: "phenomic/[name].[chunkhash:8].css",
chunkFilename: "phenomic/[name].[chunkhash:8].chunk.css",
}),
(() => {
const envVars = getClientEnvironment(config);
return new webpack.DefinePlugin({
"process.env": Object.keys(envVars).reduce((env, key) => {const getStyleLoaders = ({
cssOptions,
preProcessor,
dev
}: {
cssOptions: any;
preProcessor?: string;
dev: boolean;
}) => {
const loaders = [
dev && require.resolve("style-loader"),
!dev && {
loader: MiniCssExtractPlugin.loader,
options: Object.assign(
{},
shouldUseRelativeAssetPaths ? { publicPath: "../../" } : undefined
)
},
{
loader: require.resolve("css-loader"),
options: cssOptions
},
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve("postcss-loader"),
options: {
// Necessary for external CSS imports to workconst getStyleLoaders = (cssOptions, preProcessor?) => {
// TODO: 不清楚有什么用
const shouldUseRelativeAssetPaths = false
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{ loader: 'scoped-css-loader' },
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',{
loader: 'ts-loader',
options: {
compilerOptions: {
// allow to use dynamic import(),
// https://webpack.js.org/guides/code-splitting/#dynamic-imports
module: "esnext"
}
}
}
]
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
prependData: '@import "' + commonVars + '";',
sassOptions: {
includePaths: [srcPath]
},
}
},
]},
output: {
path: path.join(PATHS.app, 'dist'),
publicPath: './dist/',
filename: 'renderer.prod.js'
},
module: {
rules: [
// Extract all .global.css to style.css as is
{
test: /\.global\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: './'
}
},
{
loader: 'css-loader',
options: {
publicPath: './'
// sourceMap: true
}
}
]
},
// Pipe other styles through css modules and append to style.css
{
test: /^((?!\.global).)*\.css$/,export default function getConfig(fixture) {
return {
entry: { [fixture]: `./test/fixtures/${fixture}.js` },
devtool: false,
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, cssLoader],
},
{
test: /\.js$/,
use: 'babel-loader',
},
{
test: /\.js$/,
use: [
{
loader: require.resolve('../src/loader'),
options: { tagName: 'less' },
},
],
},
],
},],
],
plugins: ['lodash', '@babel/plugin-proposal-class-properties'],
},
},
},
{
test: /\.js$/,
use: ['source-map-loader'],
enforce: 'pre',
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'sass-loader',
},
],
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg|ico)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},export function getModuleSCSSLoader(environment: string): RuleSetRule {
const { ifDevelopment } = getIfUtils(environment);
const postCssPlugin = () => [
require("postcss-flexbugs-fixes"),
autoprefixer({
flexbox: "no-2009",
}),
];
return {
test: /\.(scss|sass|css)$/i,
use: removeEmpty([
ifDevelopment({
loader: require.resolve("css-hot-loader"),
}),
MiniCssExtractPlugin.loader,
{
loader: require.resolve("css-loader"),
},
{
loader: require.resolve("postcss-loader"),
options: {
ident: "postcss",
plugins: postCssPlugin,
},
},
{
loader: require.resolve("sass-loader"),
},
]),
};
}mini-css-extract-plugin
extracts CSS into separate files
