javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-14 18:12:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(webpack): angular component css handling (#9434)

Browse Source 
* 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>
This commit is contained in:
Igor Randjelovic
2021-08-03 14:37:58 +02:00
committed by GitHub
parent 0a6f80a554
commit cb91cd8a3f
2 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap
View File

@ -123,10 +123,7 @@ exports[`angular configuration for android 1`] = `
},
/* config.module.rule('css') */
{
test: /\\\\.css$/,
exclude: [
/\\\\.component(\\\\.\\\\w+)?\\\\.css$/
],
test: /app(\\\\.\\\\w+)?\\\\.css$/,
use: [
/* config.module.rule('css').use('apply-css-loader') */
{
@ -151,10 +148,7 @@ exports[`angular configuration for android 1`] = `
},
/* config.module.rule('scss') */
{
test: /\\\\.scss$/,
exclude: [
/\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
],
test: /app(\\\\.\\\\w+)?\\\\.scss$/,
use: [
/* config.module.rule('scss').use('apply-css-loader') */
{
@ -210,7 +204,10 @@ exports[`angular configuration for android 1`] = `
},
/* config.module.rule('css|component') */
{
test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/,
test: /\\\\.css$/,
exclude: [
/app(\\\\.\\\\w+)?\\\\.css$/
],
use: [
/* config.module.rule('css|component').use('raw-loader') */
{
@ -220,7 +217,10 @@ exports[`angular configuration for android 1`] = `
},
/* config.module.rule('scss|component') */
{
test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/,
test: /\\\\.scss$/,
exclude: [
/app(\\\\.\\\\w+)?\\\\.scss$/
],
use: [
/* config.module.rule('scss|component').use('raw-loader') */
{
@ -494,10 +494,7 @@ exports[`angular configuration for ios 1`] = `
},
/* config.module.rule('css') */
{
test: /\\\\.css$/,
exclude: [
/\\\\.component(\\\\.\\\\w+)?\\\\.css$/
],
test: /app(\\\\.\\\\w+)?\\\\.css$/,
use: [
/* config.module.rule('css').use('apply-css-loader') */
{
@ -522,10 +519,7 @@ exports[`angular configuration for ios 1`] = `
},
/* config.module.rule('scss') */
{
test: /\\\\.scss$/,
exclude: [
/\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
],
test: /app(\\\\.\\\\w+)?\\\\.scss$/,
use: [
/* config.module.rule('scss').use('apply-css-loader') */
{
@ -581,7 +575,10 @@ exports[`angular configuration for ios 1`] = `
},
/* config.module.rule('css|component') */
{
test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/,
test: /\\\\.css$/,
exclude: [
/app(\\\\.\\\\w+)?\\\\.css$/
],
use: [
/* config.module.rule('css|component').use('raw-loader') */
{
@ -591,7 +588,10 @@ exports[`angular configuration for ios 1`] = `
},
/* config.module.rule('scss|component') */
{
test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/,
test: /\\\\.scss$/,
exclude: [
/app(\\\\.\\\\w+)?\\\\.scss$/
],
use: [
/* config.module.rule('scss|component').use('raw-loader') */
{

22
packages/webpack5/src/configuration/angular.ts
View File

@ -52,13 +52,18 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
// exclude component css files from the normal css rule
config.module
.rule('css')
.exclude // exclude *.component.{platform}.css
.add(/\.component(\.\w+)?\.css$/);
.include.add(resolve(getEntryDirPath(), 'app.css'))
.add(resolve(getEntryDirPath(), `app.${platform}.css`))
.add(/node_modules/);
// and instead use raw-loader, since that's what angular expects
config.module
.rule('css|component')
.test(/\.component(\.\w+)?\.css$/)
.exclude.add(resolve(getEntryDirPath(), 'app.css'))
.add(resolve(getEntryDirPath(), `app.${platform}.css`))
.add(/node_modules/)
.end()
.test(/\.css$/)
.use('raw-loader')
.loader('raw-loader');
@ -71,13 +76,18 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
// exclude component css files from the normal css rule
config.module
.rule('scss')
.exclude // exclude *.component.{platform}.scss
.add(/\.component(\.\w+)?\.scss$/);
.include.add(resolve(getEntryDirPath(), 'app.scss'))
.add(resolve(getEntryDirPath(), `app.${platform}.scss`))
.add(/node_modules/);
// and instead use raw-loader, since that's what angular expects
config.module
.rule('scss|component')
.test(/\.component(\.\w+)?\.scss$/)
.exclude.add(resolve(getEntryDirPath(), 'app.css'))
.add(resolve(getEntryDirPath(), `app.${platform}.css`))
.add(/node_modules/)
.end()
.test(/\.scss$/)
.use('raw-loader')
.loader('raw-loader')
.end()