Skip to content

Commit cb91cd8

Browse files
rigor789edusperoni
rigor789
and
edusperoni
authored
fix(webpack): angular component css handling (#9434)
* feat: use raw-loader for all css but app.s?css * feat: use angular css rules for entire app dir Co-authored-by: Eduardo Speroni <edusperoni@gmail.com>
1 parent 0a6f80a commit cb91cd8

2 files changed

Lines changed: 36 additions & 26 deletions

File tree

‎packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -123,10 +123,7 @@ exports[`angular configuration for android 1`] = `
123123
},
124124
/* config.module.rule('css') */
125125
{
126-
test: /\\\\.css$/,
127-
exclude: [
128-
/\\\\.component(\\\\.\\\\w+)?\\\\.css$/
129-
],
126+
test: /app(\\\\.\\\\w+)?\\\\.css$/,
130127
use: [
131128
/* config.module.rule('css').use('apply-css-loader') */
132129
{
@@ -151,10 +148,7 @@ exports[`angular configuration for android 1`] = `
151148
},
152149
/* config.module.rule('scss') */
153150
{
154-
test: /\\\\.scss$/,
155-
exclude: [
156-
/\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
157-
],
151+
test: /app(\\\\.\\\\w+)?\\\\.scss$/,
158152
use: [
159153
/* config.module.rule('scss').use('apply-css-loader') */
160154
{
@@ -210,7 +204,10 @@ exports[`angular configuration for android 1`] = `
210204
},
211205
/* config.module.rule('css|component') */
212206
{
213-
test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/,
207+
test: /\\\\.css$/,
208+
exclude: [
209+
/app(\\\\.\\\\w+)?\\\\.css$/
210+
],
214211
use: [
215212
/* config.module.rule('css|component').use('raw-loader') */
216213
{
@@ -220,7 +217,10 @@ exports[`angular configuration for android 1`] = `
220217
},
221218
/* config.module.rule('scss|component') */
222219
{
223-
test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/,
220+
test: /\\\\.scss$/,
221+
exclude: [
222+
/app(\\\\.\\\\w+)?\\\\.scss$/
223+
],
224224
use: [
225225
/* config.module.rule('scss|component').use('raw-loader') */
226226
{
@@ -494,10 +494,7 @@ exports[`angular configuration for ios 1`] = `
494494
},
495495
/* config.module.rule('css') */
496496
{
497-
test: /\\\\.css$/,
498-
exclude: [
499-
/\\\\.component(\\\\.\\\\w+)?\\\\.css$/
500-
],
497+
test: /app(\\\\.\\\\w+)?\\\\.css$/,
501498
use: [
502499
/* config.module.rule('css').use('apply-css-loader') */
503500
{
@@ -522,10 +519,7 @@ exports[`angular configuration for ios 1`] = `
522519
},
523520
/* config.module.rule('scss') */
524521
{
525-
test: /\\\\.scss$/,
526-
exclude: [
527-
/\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
528-
],
522+
test: /app(\\\\.\\\\w+)?\\\\.scss$/,
529523
use: [
530524
/* config.module.rule('scss').use('apply-css-loader') */
531525
{
@@ -581,7 +575,10 @@ exports[`angular configuration for ios 1`] = `
581575
},
582576
/* config.module.rule('css|component') */
583577
{
584-
test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/,
578+
test: /\\\\.css$/,
579+
exclude: [
580+
/app(\\\\.\\\\w+)?\\\\.css$/
581+
],
585582
use: [
586583
/* config.module.rule('css|component').use('raw-loader') */
587584
{
@@ -591,7 +588,10 @@ exports[`angular configuration for ios 1`] = `
591588
},
592589
/* config.module.rule('scss|component') */
593590
{
594-
test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/,
591+
test: /\\\\.scss$/,
592+
exclude: [
593+
/app(\\\\.\\\\w+)?\\\\.scss$/
594+
],
595595
use: [
596596
/* config.module.rule('scss|component').use('raw-loader') */
597597
{

‎packages/webpack5/src/configuration/angular.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,18 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
5252
// exclude component css files from the normal css rule
5353
config.module
5454
.rule('css')
55-
.exclude // exclude *.component.{platform}.css
56-
.add(/\.component(\.\w+)?\.css$/);
55+
.include.add(resolve(getEntryDirPath(), 'app.css'))
56+
.add(resolve(getEntryDirPath(), `app.${platform}.css`))
57+
.add(/node_modules/);
5758

5859
// and instead use raw-loader, since that's what angular expects
5960
config.module
6061
.rule('css|component')
61-
.test(/\.component(\.\w+)?\.css$/)
62+
.exclude.add(resolve(getEntryDirPath(), 'app.css'))
63+
.add(resolve(getEntryDirPath(), `app.${platform}.css`))
64+
.add(/node_modules/)
65+
.end()
66+
.test(/\.css$/)
6267
.use('raw-loader')
6368
.loader('raw-loader');
6469

@@ -71,13 +76,18 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
7176
// exclude component css files from the normal css rule
7277
config.module
7378
.rule('scss')
74-
.exclude // exclude *.component.{platform}.scss
75-
.add(/\.component(\.\w+)?\.scss$/);
79+
.include.add(resolve(getEntryDirPath(), 'app.scss'))
80+
.add(resolve(getEntryDirPath(), `app.${platform}.scss`))
81+
.add(/node_modules/);
7682

7783
// and instead use raw-loader, since that's what angular expects
7884
config.module
7985
.rule('scss|component')
80-
.test(/\.component(\.\w+)?\.scss$/)
86+
.exclude.add(resolve(getEntryDirPath(), 'app.css'))
87+
.add(resolve(getEntryDirPath(), `app.${platform}.css`))
88+
.add(/node_modules/)
89+
.end()
90+
.test(/\.scss$/)
8191
.use('raw-loader')
8292
.loader('raw-loader')
8393
.end()

0 commit comments

Comments
 (0)