extract-css-chunks-webpack-plugin | Extract CSS from chunks into multiple stylesheets + HMR | State Container library
kandi X-RAY | extract-css-chunks-webpack-plugin Summary
kandi X-RAY | extract-css-chunks-webpack-plugin Summary
If you like our work, check out our Redux-based router redux-first-router or its sucessor which, Rudy.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Creates a new plugin
- Update a css link iframe .
- Get the current script url
- Reload a CSS style url
- Render hot loader
- Update all local css resources
- Debounce a function .
- Search url for reload url
- Reload all links
- Checks if a url is a valid url .
extract-css-chunks-webpack-plugin Key Features
extract-css-chunks-webpack-plugin Examples and Code Snippets
Community Discussions
Trending Discussions on extract-css-chunks-webpack-plugin
QUESTION
Lets say I'd like to import some stylesheets from a node module in my main app.scss
:
@import '~bootstrap/scss/bootstrap';
This will be correctly resolved by PhpStorm, and built by Nuxt.js as well, all good.
Now if I want to do the same for a scoped node module (a node module with a name in the format of @scope/module
) Nuxt.js and PhpStorm diverges:
@import '@fortawesome/fontawesome-svg-core/styles.css';
This works fine in Nuxt.js, build goes on without issues, but PhpStorm underlines the whole thing saying
Cannot resolve directory '@fortawesome'
@import '~@fortawesome/fontawesome-svg-core/styles.css';
This is understood by PhpStorm and can be resolved just fine, however causes Nuxt.js build to fail with:
ANSWER
Answered 2020-Aug-20 at 12:26Turns out, the issue is caused by the .css
extension.
This works fine for both PhpStorm and Nuxt.js:
@import '~@fortawesome/fontawesome-svg-core/styles';
Apparently (according to this answer and/or this issue) when the .css
extension is used for the @import
statement, sass-loader
would not really import the given file, but rather translate it into @import url('~@fortawesome/fontawesome-svg-core/styles.css')
statement, which is indeed wrong, as url()
cannot resolve the ~
properly.
So after all there is significant difference between these two subtly different SASS lines:
@import '@fortawesome/fontawesome-svg-core/styles.css';
This results in
@import url('@fortawesome/fontawesome-svg-core/styles.css')
, which is up to webpack to resolve later in the build process. Or if not resolved by webpack, it may be sent to the browser where it would fail for sure.@import '~@fortawesome/fontawesome-svg-core/styles';
This is resolved by
sass-loader
andnode_modules/@fortawesome/fontawesome-svg-core/styles.css
is imported into the main style file leaving nothing to be resolved later in the build process (or in the browser for that matter).
PS: also I've realised it has nothing to do with the given node modules being scoped or not. It all comes down to importing .scss
vs .css
.
QUESTION
I am trying to integrate https://www.npmjs.com/package/react-date-range When I import css files, it gives loader issue. My webpack file and error message is shown below. Any help regarding this problem is appreciated
Webpack config File
...ANSWER
Answered 2020-Aug-19 at 14:31Since you are loading the css file from node_modules
package but you set css loader with include
only your source path. I suggest to either remove that:
QUESTION
I have following code on server side:
...ANSWER
Answered 2020-May-04 at 08:11It seems in this case the error shows because the version of ts-node
being used does not support ES Module syntax, as is being discussed here. I found out from that ticket that ts-node v8.10.0
provides experimental support, so maybe updating it will get this working. I don't know of any other solutions, but you should be able to run the files by compiling the .ts
to .js
and run them with node
instead of ts-node
. Let me know otherwise, I'm happy to dig a little further.
QUESTION
I need to use addPrefetchExcludes to register a dynamic route at runtime.
It needs to be placed before the the app code addPrefetchExcludes Docs
But i'm getting this error:
I'm have that line before the declaration of the App function
...ANSWER
Answered 2020-Apr-21 at 01:46react-static
v6.x doesn't support addPrefetchExcludes
yet. Upgrade to v7.x would fix this issue.
QUESTION
I am using Webpack 4 to build a simple website with an express backend. Now that I am implementing a custom element I am confronted with an issue regarding the shadow DOM.
The issue is as follows: all of my SCSS is being combined into one CSS output file. I need it to remain separate so that the custom element's style can be dynamically added to the shadow DOM, when the element is connected.
I am using extract-css-chunks-webpack-plugin
(which I think the issue is with), css-loader
, postcss-preset-env
and sass-loader
to handle all SCSS within the app/site.
All my searching thus far has simply lead me to the exact opposite of what I need (people trying to combine their SCSS).
I understand I could build the custom element separately and then just import it into the project after it has been built but that means managing two building environments and then having to version control across both -- seems like a lot of overhead.
The project's folder structure is as follows:
...ANSWER
Answered 2020-Jan-03 at 15:24I'm assuming modal.scss
is importing main.scss
? If that's so, then your issue is with the Sass compiler itself, not webpack. Depending on what's in modal.scss
, you may want to use @use
instead
Edit 1:
If you're adding your compiled css in the shadow DOM in let's say a
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install extract-css-chunks-webpack-plugin
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page