Skip to content

Commit 288ecd0

Browse files
vatchleyvatchley
committed
fix: ensure regular .s[ca]ss files are processed by webpack
1 parent c5adde8 commit 288ecd0

File tree

3 files changed

+130
-35
lines changed

3 files changed

+130
-35
lines changed

‎packages/react-scripts/config/webpack.config.dev.js

Lines changed: 56 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -181,19 +181,20 @@ module.exports = {
181181
cacheDirectory: true,
182182
},
183183
},
184-
// "postcss" loader applies autoprefixer to our CSS.
185-
// "css" loader resolves paths in CSS and adds assets as dependencies.
186-
// "style" loader turns CSS into JS modules that inject <style> tags.
187-
// In production, we use a plugin to extract that CSS to a file, but
188-
// in development "style" loader enables hot editing of CSS.
184+
// CSS Modules version of the above loader. Files should be suffixed as .module.css
185+
// This should be inline with the PR that exists for create-react-app that should land
186+
// in future versions.
189187
{
190-
test: /\.css$/,
188+
test: /\.module\.css$/,
191189
use: [
192190
require.resolve('style-loader'),
193191
{
194192
loader: require.resolve('css-loader'),
195193
options: {
196-
importLoaders: 1,
194+
modules: true,
195+
sourceMap: true,
196+
importLoaders: 2,
197+
localIdentName: '[name]__[local]__[hash:base64:5]'
197198
},
198199
},
199200
{
@@ -218,11 +219,11 @@ module.exports = {
218219
},
219220
],
220221
},
221-
// CSS Modules version of the above loader. Files should be suffixed as .module.css
222+
// SCSS/SASS Modules version of the above loader. Files should be suffixed as .module.s[ac]ss
222223
// This should be inline with the PR that exists for create-react-app that should land
223224
// in future versions.
224225
{
225-
test: /\.module\.css$/,
226+
test: /\.module\.s[ca]ss$/,
226227
use: [
227228
require.resolve('style-loader'),
228229
{
@@ -254,22 +255,60 @@ module.exports = {
254255
],
255256
},
256257
},
258+
require.resolve('sass-loader')
257259
],
258260
},
259-
// SCSS/SASS Modules version of the above loader. Files should be suffixed as .module.s[ac]ss
260-
// This should be inline with the PR that exists for create-react-app that should land
261-
// in future versions.
261+
// "postcss" loader applies autoprefixer to our CSS.
262+
// "css" loader resolves paths in CSS and adds assets as dependencies.
263+
// "style" loader turns CSS into JS modules that inject <style> tags.
264+
// In production, we use a plugin to extract that CSS to a file, but
265+
// in development "style" loader enables hot editing of CSS.
262266
{
263-
test: /\.module\.s[ca]ss$/,
267+
test: /\.css$/,
264268
use: [
265269
require.resolve('style-loader'),
266270
{
267271
loader: require.resolve('css-loader'),
268272
options: {
269-
modules: true,
270-
sourceMap: true,
271-
importLoaders: 2,
272-
localIdentName: '[name]__[local]__[hash:base64:5]'
273+
importLoaders: 1,
274+
},
275+
},
276+
{
277+
loader: require.resolve('postcss-loader'),
278+
options: {
279+
// Necessary for external CSS imports to work
280+
// https://github.com/facebookincubator/create-react-app/issues/2677
281+
ident: 'postcss',
282+
plugins: () => [
283+
require('postcss-flexbugs-fixes'),
284+
autoprefixer({
285+
browsers: [
286+
'>1%',
287+
'last 4 versions',
288+
'Firefox ESR',
289+
'not ie < 9', // React doesn't support IE8 anyway
290+
],
291+
flexbox: 'no-2009',
292+
}),
293+
],
294+
},
295+
},
296+
],
297+
},
298+
// "sass-loader" loader converts sass/scss to CSS output
299+
// "postcss" loader applies autoprefixer to our CSS.
300+
// "css" loader resolves paths in CSS and adds assets as dependencies.
301+
// "style" loader turns CSS into JS modules that inject <style> tags.
302+
// In production, we use a plugin to extract that CSS to a file, but
303+
// in development "style" loader enables hot editing of CSS.
304+
{
305+
test: /\.s[ac]ss$/,
306+
use: [
307+
require.resolve('style-loader'),
308+
{
309+
loader: require.resolve('css-loader'),
310+
options: {
311+
importLoaders: 1,
273312
},
274313
},
275314
{

‎packages/react-scripts/config/webpack.config.prod.js

Lines changed: 73 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -180,20 +180,8 @@ module.exports = {
180180
compact: true,
181181
},
182182
},
183-
// The notation here is somewhat confusing.
184-
// "postcss" loader applies autoprefixer to our CSS.
185-
// "css" loader resolves paths in CSS and adds assets as dependencies.
186-
// "style" loader normally turns CSS into JS modules injecting <style>,
187-
// but unlike in development configuration, we do something different.
188-
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
189-
// (second argument), then grabs the result CSS and puts it into a
190-
// separate file in our build process. This way we actually ship
191-
// a single CSS file in production instead of JS code injecting <style>
192-
// tags. If you use code splitting, however, any async bundles will still
193-
// use the "style" loader inside the async code so CSS from them won't be
194-
// in the main CSS file.
195183
{
196-
test: /\.css$/,
184+
test: /\.module\.css$/,
197185
loader: ExtractTextPlugin.extract(
198186
Object.assign(
199187
{
@@ -202,9 +190,11 @@ module.exports = {
202190
{
203191
loader: require.resolve('css-loader'),
204192
options: {
193+
modules: true,
205194
importLoaders: 1,
206195
minimize: true,
207196
sourceMap: shouldUseSourceMap,
197+
localIdentName: '[name]__[local]__[hash:base64:5]'
208198
},
209199
},
210200
{
@@ -235,7 +225,7 @@ module.exports = {
235225
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
236226
},
237227
{
238-
test: /\.module\.css$/,
228+
test: /\.module\.s[ca]ss$/,
239229
loader: ExtractTextPlugin.extract(
240230
Object.assign(
241231
{
@@ -271,15 +261,83 @@ module.exports = {
271261
],
272262
},
273263
},
264+
{ loader: 'sass-loader', options: { sourceMap: shouldUseSourceMap } }
274265
],
275266
},
276267
extractTextPluginOptions
277268
)
278269
),
279270
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
280271
},
272+
// The notation here is somewhat confusing.
273+
// "postcss" loader applies autoprefixer to our CSS.
274+
// "css" loader resolves paths in CSS and adds assets as dependencies.
275+
// "style" loader normally turns CSS into JS modules injecting <style>,
276+
// but unlike in development configuration, we do something different.
277+
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
278+
// (second argument), then grabs the result CSS and puts it into a
279+
// separate file in our build process. This way we actually ship
280+
// a single CSS file in production instead of JS code injecting <style>
281+
// tags. If you use code splitting, however, any async bundles will still
282+
// use the "style" loader inside the async code so CSS from them won't be
283+
// in the main CSS file.
281284
{
282-
test: /\.module\.s[ca]ss$/,
285+
test: /\.css$/,
286+
loader: ExtractTextPlugin.extract(
287+
Object.assign(
288+
{
289+
fallback: require.resolve('style-loader'),
290+
use: [
291+
{
292+
loader: require.resolve('css-loader'),
293+
options: {
294+
importLoaders: 1,
295+
minimize: true,
296+
sourceMap: shouldUseSourceMap,
297+
},
298+
},
299+
{
300+
loader: require.resolve('postcss-loader'),
301+
options: {
302+
// Necessary for external CSS imports to work
303+
// https://github.com/facebookincubator/create-react-app/issues/2677
304+
ident: 'postcss',
305+
plugins: () => [
306+
require('postcss-flexbugs-fixes'),
307+
autoprefixer({
308+
browsers: [
309+
'>1%',
310+
'last 4 versions',
311+
'Firefox ESR',
312+
'not ie < 9', // React doesn't support IE8 anyway
313+
],
314+
flexbox: 'no-2009',
315+
}),
316+
],
317+
},
318+
},
319+
],
320+
},
321+
extractTextPluginOptions
322+
)
323+
),
324+
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
325+
},
326+
// The notation here is somewhat confusing.
327+
// "sass-loader" converts sass/scss files to CSS output
328+
// "postcss" loader applies autoprefixer to our CSS.
329+
// "css" loader resolves paths in CSS and adds assets as dependencies.
330+
// "style" loader normally turns CSS into JS modules injecting <style>,
331+
// but unlike in development configuration, we do something different.
332+
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
333+
// (second argument), then grabs the result CSS and puts it into a
334+
// separate file in our build process. This way we actually ship
335+
// a single CSS file in production instead of JS code injecting <style>
336+
// tags. If you use code splitting, however, any async bundles will still
337+
// use the "style" loader inside the async code so CSS from them won't be
338+
// in the main CSS file.
339+
{
340+
test: /\.css$/,
283341
loader: ExtractTextPlugin.extract(
284342
Object.assign(
285343
{
@@ -288,11 +346,9 @@ module.exports = {
288346
{
289347
loader: require.resolve('css-loader'),
290348
options: {
291-
modules: true,
292349
importLoaders: 1,
293350
minimize: true,
294351
sourceMap: shouldUseSourceMap,
295-
localIdentName: '[name]__[local]__[hash:base64:5]'
296352
},
297353
},
298354
{

‎packages/react-scripts/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "tandemly-react-scripts",
2+
"name": "@tandem.ly/react-scripts",
33
"version": "1.0.14",
44
"description": "Tandem.ly Custom Configuration and scripts for Create React App.",
55
"repository": "Tandemly/create-react-app",

0 commit comments

Comments
 (0)