Styjun

Proving a certain type of topology is discrete without the axiom of choice

Did Karl Marx ever use any example that involved cotton and dollars to illustrate the way capital and surplus value were generated?

What was the Shuttle Carrier Aircraft escape tunnel?

Archery in modern conflicts

expiry or manufactured date?

Do I have any obligations to my PhD supervisor's requests after I have graduated?

Can White Castle?

How does a blind passenger not die, if driver becomes unconscious

Does this Wild Magic result affect the sorcerer or just other creatures?

Interaction between Leyline of Anticipation and Teferi, Time Raveler

Why is the voltage measurement of this circuit different when the switch is on?

How long would it take to cross the Channel in 1890's?

Why do some professors with PhDs leave their professorships to teach high school?

Where do I get advice and guidance from in my PhD if my supervisor is not an expert in the field I am working on?

How do I turn off a repeating trade?

Sci fi short story, robot city that nags people about health

Hand soldering SMD 1206 components

Why do some games show lights shine thorugh walls?

Inverse-quotes-quine

Can we put equal sign after aggregate functions in sql?

How convert text to hex value?

What reason would an alien civilization have for building a Dyson Sphere (or Swarm) if cheap Nuclear fusion is available?

Why do textbooks often include the solutions to odd or even numbered problems but not both?

Has there been any indication at all that further negotiation between the UK and EU is possible?

Build additional CSS file in angular build

Set cellpadding and cellspacing in CSS?Convert HTML + CSS to PDF with PHP?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow can I transition height: 0; to height: auto; using CSS?How do CSS triangles work?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

Background

@angular-builders/custom-webpack allows us to customize the webpack config of angular build, tutorial here. I am using it to build the additional scripts for web extension (Chrome/Firefox).

Here is the extra.webpack.config.js that I have included in angular.json

const resolve = require('path');

const scriptsDir = __dirname;

module.exports = 
 entry: 
 "background-script": resolve(scriptsDir, 'background-script/boot.ts'),
 "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts')],
 "site-bridge": resolve(scriptsDir, 'site-bridge/boot.ts')
 
;

As expected it outputs background-script.js, fill-manager.js and site-bridge.js alongside angular build artifacts. As this webpack config is merged with the angular's webpack config, we can control all the optimizations, hashing, source maps etc from a single angular.json file.

Problem

I also want to bundle additional css files that would be used with extension scripts and be controlled by angular build.

I might be able to add specific rules, loaders etc to extra.webpack.config.js but I do not want to deal with postcss, autoprefixer and sass loaders etc as its already being done inside angular.

Just like script files, simply adding css entry inside extra.webpack.config.js does not produce css file i.e.

module.exports = 
 entry: 
 ...
 "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts'), resolve(scriptsDir, 'fill-manager/main.css')],
 ...
 
;

Is there a way where I can specify a css/scss file entry in extra.webpack.config.js and it just output a bundled css file using configuration based on angular?

css angular webpack angular-builder angular-devkit

share|improve this question

edited May 14 at 17:58

JJJ

29.4k1515 gold badges7878 silver badges9393 bronze badges

asked Mar 25 at 9:41

bilal.haiderbilal.haider

16433 silver badges1818 bronze badges

add a comment | 

1

Background

@angular-builders/custom-webpack allows us to customize the webpack config of angular build, tutorial here. I am using it to build the additional scripts for web extension (Chrome/Firefox).

Here is the extra.webpack.config.js that I have included in angular.json

const resolve = require('path');

const scriptsDir = __dirname;

module.exports = 
 entry: 
 "background-script": resolve(scriptsDir, 'background-script/boot.ts'),
 "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts')],
 "site-bridge": resolve(scriptsDir, 'site-bridge/boot.ts')
 
;

As expected it outputs background-script.js, fill-manager.js and site-bridge.js alongside angular build artifacts. As this webpack config is merged with the angular's webpack config, we can control all the optimizations, hashing, source maps etc from a single angular.json file.

Problem

I also want to bundle additional css files that would be used with extension scripts and be controlled by angular build.

I might be able to add specific rules, loaders etc to extra.webpack.config.js but I do not want to deal with postcss, autoprefixer and sass loaders etc as its already being done inside angular.

Just like script files, simply adding css entry inside extra.webpack.config.js does not produce css file i.e.

module.exports = 
 entry: 
 ...
 "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts'), resolve(scriptsDir, 'fill-manager/main.css')],
 ...
 
;

Is there a way where I can specify a css/scss file entry in extra.webpack.config.js and it just output a bundled css file using configuration based on angular?

css angular webpack angular-builder angular-devkit

share|improve this question

edited May 14 at 17:58

JJJ

29.4k1515 gold badges7878 silver badges9393 bronze badges

asked Mar 25 at 9:41

bilal.haiderbilal.haider

16433 silver badges1818 bronze badges

add a comment | 

Background

@angular-builders/custom-webpack allows us to customize the webpack config of angular build, tutorial here. I am using it to build the additional scripts for web extension (Chrome/Firefox).

Here is the extra.webpack.config.js that I have included in angular.json

const resolve = require('path');

const scriptsDir = __dirname;

module.exports = 
 entry: 
 "background-script": resolve(scriptsDir, 'background-script/boot.ts'),
 "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts')],
 "site-bridge": resolve(scriptsDir, 'site-bridge/boot.ts')
 
;

As expected it outputs background-script.js, fill-manager.js and site-bridge.js alongside angular build artifacts. As this webpack config is merged with the angular's webpack config, we can control all the optimizations, hashing, source maps etc from a single angular.json file.

Problem

I also want to bundle additional css files that would be used with extension scripts and be controlled by angular build.

I might be able to add specific rules, loaders etc to extra.webpack.config.js but I do not want to deal with postcss, autoprefixer and sass loaders etc as its already being done inside angular.

Just like script files, simply adding css entry inside extra.webpack.config.js does not produce css file i.e.

module.exports = 
 entry: 
 ...
 "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts'), resolve(scriptsDir, 'fill-manager/main.css')],
 ...
 
;

Is there a way where I can specify a css/scss file entry in extra.webpack.config.js and it just output a bundled css file using configuration based on angular?

css angular webpack angular-builder angular-devkit

share|improve this question

edited May 14 at 17:58

JJJ

29.4k1515 gold badges7878 silver badges9393 bronze badges

asked Mar 25 at 9:41

bilal.haiderbilal.haider

16433 silver badges1818 bronze badges

const resolve = require('path');

const scriptsDir = __dirname;

module.exports = 
 entry: 
 "background-script": resolve(scriptsDir, 'background-script/boot.ts'),
 "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts')],
 "site-bridge": resolve(scriptsDir, 'site-bridge/boot.ts')
 
;

module.exports = 
 entry: 
 ...
 "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts'), resolve(scriptsDir, 'fill-manager/main.css')],
 ...
 
;

css angular webpack angular-builder angular-devkit

css angular webpack angular-builder angular-devkit

share|improve this question

edited May 14 at 17:58

JJJ

29.4k1515 gold badges7878 silver badges9393 bronze badges

asked Mar 25 at 9:41

bilal.haiderbilal.haider

16433 silver badges1818 bronze badges

share|improve this question

edited May 14 at 17:58

JJJ

29.4k1515 gold badges7878 silver badges9393 bronze badges

asked Mar 25 at 9:41

bilal.haiderbilal.haider

16433 silver badges1818 bronze badges

edited May 14 at 17:58

JJJ

29.4k1515 gold badges7878 silver badges9393 bronze badges

edited May 14 at 17:58

JJJ

29.4k1515 gold badges7878 silver badges9393 bronze badges

asked Mar 25 at 9:41

bilal.haiderbilal.haider

16433 silver badges1818 bronze badges

asked Mar 25 at 9:41

bilal.haiderbilal.haider

16433 silver badges1818 bronze badges