17
17
* - [output](https://webpack.js.org/configuration/output/)
18
18
*/
19
19
20
- const autoprefixer = require ( 'autoprefixer' ) ;
21
- const postUrl = require ( 'postcss-url' ) ;
22
- const fs = require ( 'fs' ) ;
23
20
const path = require ( 'path' ) ;
24
21
const webpack = require ( 'webpack' ) ;
25
22
const HtmlWebpackPlugin = require ( 'html-webpack-plugin' ) ;
@@ -39,90 +36,9 @@ const publicUrl = publicPath.slice(0, -1);
39
36
// Get environment variables to inject into our app.
40
37
const env = getClientEnvironment ( publicUrl ) ;
41
38
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
-
48
39
const isProduction = env . stringified [ 'process.env' ] . NODE_ENV === '"production"' ;
49
- const shouldUseSourceMap = isProduction && ( process . env . GENERATE_SOURCEMAP !== 'false' ) ;
50
-
51
40
const cssFilenameTemplate = 'static/css/[name].[contenthash:8].css' ;
52
41
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
-
126
42
const loaderRules = Object . freeze ( [
127
43
// Disable require.ensure as it's not a standard language feature.
128
44
{ parser : { requireEnsure : false } } ,
@@ -198,25 +114,9 @@ const loaderRules = Object.freeze([
198
114
} ,
199
115
} ] ,
200
116
} ,
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
216
117
{
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' ] ,
220
120
} ,
221
121
{
222
122
loader : require . resolve ( 'file-loader' ) ,
@@ -255,6 +155,7 @@ const webpackPlugins = [
255
155
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
256
156
// You can remove this if you don't use Moment.js:
257
157
new webpack . IgnorePlugin ( / ^ \. \/ l o c a l e $ / , / m o m e n t $ / ) ,
158
+ new MiniCssExtractPlugin ( ) ,
258
159
] ;
259
160
260
161
if ( isProduction ) {
0 commit comments