1717 * - [output](https://webpack.js.org/configuration/output/)
1818 */
1919
20- const autoprefixer = require ( 'autoprefixer' ) ;
21- const postUrl = require ( 'postcss-url' ) ;
22- const fs = require ( 'fs' ) ;
2320const path = require ( 'path' ) ;
2421const webpack = require ( 'webpack' ) ;
2522const HtmlWebpackPlugin = require ( 'html-webpack-plugin' ) ;
@@ -39,90 +36,9 @@ const publicUrl = publicPath.slice(0, -1);
3936// Get environment variables to inject into our app.
4037const env = getClientEnvironment ( publicUrl ) ;
4138
42- // style files regexes
43- const cssRegex = / \. c s s $ / ;
44- // const cssModuleRegex = /\.module\.css$/;
45- const sassRegex = / \. ( s c s s | s a s s ) $ / ;
46- // const sassModuleRegex = /\.module\.(scss|sass)$/;
47-
4839const isProduction = env . stringified [ 'process.env' ] . NODE_ENV === '"production"' ;
49- const shouldUseSourceMap = isProduction && ( process . env . GENERATE_SOURCEMAP !== 'false' ) ;
50-
5140const cssFilenameTemplate = 'static/css/[name].[contenthash:8].css' ;
5241
53- // common function to get style loaders
54- const getStyleLoaders = ( preProcessor ) => {
55- // importLoaders: See https://webpack.js.org/loaders/css-loader/#importloaders
56- let importLoaders = 1 ; // for postcss-loader
57- if ( preProcessor ) {
58- importLoaders += 1 ; // for preProcessor
59- }
60-
61- let inlineStyleLoader = require . resolve ( 'style-loader' ) ;
62- if ( isProduction ) {
63- // Output CSS files, and rewrite paths relative from CSS dir
64- const cssRelativePath = Array ( cssFilenameTemplate . split ( '/' ) . length ) . join ( '../' ) ;
65- inlineStyleLoader = {
66- loader : MiniCssExtractPlugin . loader ,
67- options : { publicPath : cssRelativePath } ,
68- } ;
69- }
70-
71- const loaders = [
72- inlineStyleLoader ,
73- {
74- loader : require . resolve ( 'css-loader' ) ,
75- options : { importLoaders } ,
76- } ,
77- {
78- // Options for PostCSS as we reference these options twice
79- // Adds vendor prefixing based on your specified browser support in
80- // package.json
81- loader : require . resolve ( 'postcss-loader' ) ,
82- options : {
83- postcssOptions : {
84- plugins : [
85- [
86- 'autoprefixer' ,
87- {
88- flexbox : 'no-2009' ,
89- } ,
90- ] ,
91- [
92- 'postcss-url' ,
93- {
94- url : ( { url } ) => {
95- /**
96- * If file exists in the Network Canvas submodule, update path to
97- * resolve there relatively from Architect.
98- */
99- const ncPath = path . resolve ( 'src' , 'network-canvas' , 'src' , 'styles' , url ) ;
100- const ncCSSPath = `../network-canvas/src/styles/${ url } ` ;
101-
102- try {
103- fs . accessSync ( ncPath , fs . constants . R_OK ) ;
104- return ncCSSPath ;
105- } catch ( err ) {
106- return url ;
107- }
108- } ,
109- } ,
110- ] ,
111- ] ,
112- } ,
113- sourceMap : shouldUseSourceMap ,
114- } ,
115- } ,
116- ] ;
117- if ( preProcessor ) {
118- loaders . push ( {
119- loader : require . resolve ( preProcessor ) ,
120- } ) ;
121- // loaders.push(require.resolve(preProcessor));
122- }
123- return loaders ;
124- } ;
125-
12642const loaderRules = Object . freeze ( [
12743 // Disable require.ensure as it's not a standard language feature.
12844 { parser : { requireEnsure : false } } ,
@@ -198,25 +114,9 @@ const loaderRules = Object.freeze([
198114 } ,
199115 } ] ,
200116 } ,
201- // "postcss" loader applies autoprefixer to our CSS.
202- // "css" loader resolves paths in CSS and adds assets as dependencies.
203- // "style" loader turns CSS into JS modules that inject <style> tags.
204- // In production, we use a plugin to extract that CSS to a file, but
205- // in development "style" loader enables hot editing of CSS.
206- // By default we support CSS Modules with the extension .module.css
207- {
208- test : cssRegex ,
209- use : getStyleLoaders ( ) ,
210- } ,
211- // Opt-in support for SASS (using .scss or .sass extensions).
212- // Chains the sass-loader with the css-loader and the style-loader
213- // to immediately apply all styles to the DOM.
214- // By default we support SASS Modules with the
215- // extensions .module.scss or .module.sass
216117 {
217- test : sassRegex ,
218- include : paths . appStyles ,
219- use : getStyleLoaders ( 'sass-loader' ) ,
118+ test : / \. s ? c s s $ / i,
119+ use : [ MiniCssExtractPlugin . loader , 'css-loader' , 'postcss-loader' , 'sass-loader' ] ,
220120 } ,
221121 {
222122 loader : require . resolve ( 'file-loader' ) ,
@@ -255,6 +155,7 @@ const webpackPlugins = [
255155 // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
256156 // You can remove this if you don't use Moment.js:
257157 new webpack . IgnorePlugin ( / ^ \. \/ l o c a l e $ / , / m o m e n t $ / ) ,
158+ new MiniCssExtractPlugin ( ) ,
258159] ;
259160
260161if ( isProduction ) {
0 commit comments