Unable to provide styleUrl for the Angular component
See original GitHub issueI have downloaded this github application and able to run successfully by loading all single spa applications. But I am facing one problem when specify the style url in Angular component.
@Component({
selector: 'app5',
styleUrls:["./app5.component.scss"],_
template: `
<div style="margin-top: 100px;">
<img [src]="angularImg" style="width: 100px;"/> <br />
This was rendered by App5 which is written in Angular 6
</div>
<br />
I have installed all the dependencies required for style loader ,scss loader , post css loader but finally I am getting the below error .
ERROR in ./src/app5.component.scss
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: No PostCSS Config found in: C:\MyCave\jStudio\LinqIndepth\CSharp.Linq\MicrofrontEndResearch\SingleSpaPortal\Application\app5Angular\src
at config.load.then (C:\MyCave\jStudio\LinqIndepth\CSharp.Linq\MicrofrontEndResearch\SingleSpaPortal\Application\app5Angular\node_modules\postcss-load-config\src\index.js:55:15)
@ ./src/app5.component.ts 46:21-53
@ ./src/main-module.ts
@ ./src/singleSpaEntry.ts
@ multi (webpack)-dev-server/client?http://localhost:9005 src/singleSpaEntry.ts
i 「wdm」: Failed to compile.
for resolving this error I have installed postconfig package also , but still I am getting the same error is there any workaround for this??
Issue Analytics
- State:
- Created 5 years ago
- Comments:6
Top Results From Across the Web
Fails to style with styleUrls in Angular component's scss file
The scss stylesheet in the container component controls the styles for all pages. The global.sccs only contains imports, no styling and doesn't ...
Read more >Unable to load component style url for loading the scss #10
I have loaded successfully the single spa angular , but when I specify the style url I am getting the below error at...
Read more >Component styles
There are several ways to add styles to a component: By setting styles or styleUrls metadata; Inline in the template HTML; With CSS...
Read more >Chapter 4, Understanding and Using Angular Components
The decision between using styles and styleUrls is one of personal preference and has no impact on the final performance of the application....
Read more >9. Working with styleUrls and styles option in the angular ...
... we will see what are the different options present in styling the components in the angular. ... Your browser can't play this...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The lightest weight postcss config is the one I listed above.
module.exports = { map: false, from: './your/directory/path', to: './yourOutputFolder', }
Just create a postcss.config.js file in your src directory and copy and paste the code in. This is also the example they give on their website. I have postcss up and running with that config on single-spa-portal-example.Hi there, Do you have a postcss.config in your directory? This is what mine looks like in my src folder.
module.exports = { map: false, from: './src/assets/styles', to: './dist', }
It describes here how to make the config file if you want too.
Hope that helps!