Path of extracted css file

[Rincewind3d]

Hey,

is it possible to get the path of an imported CSS/SCSS file with mini-css-extract-plugin?

const path = await import(’src/design.scss’);
 //path should be something like /app/3.style.ba3f5c22e233291aa0aa.css

I tried it with

            test: /\.scss$/,
            use: [
                 {
                    loader: 'file-loader'
                },
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                }, {
                    loader: 'resolve-url-loader'
                }, {
                    loader: 'sass-loader'
                }]

But file-loader just returns the SASS file and not the extracted CSS File.

[alexander-akait]

@Hanterdro webpack is static build tools, after extract css you loss css in your graph build and it is impossible handle this import. you should manually load extracted files (or include you html)

[Rincewind3d]

Dam it. I was afraid that the answer is that is not possible.
Maybe this will work when Webpack includes in the next major version hopefully the extract feature natively.

Would be really nice if I would get the extracted URL - for web components ;)

[alexander-akait]

@Hanterdro if you create minimum reproducible test repo and describe what you have and what you expected i think we will find best solution for this

[Rincewind3d]

The problem is very easy: Web Components with shadow DOM have scoped CSS.

If I use a CSS framework like Bootstrap in my app the CSS framework classes are not available in the Web Component.

A way to get the CSS framework in the web component would be to bundle the CSS Framework in the Component... but having a complete instance of the framework bundeld in each Web Component is... a waste of space ;)

Currently my solution is to define the CSS Framework in the web component as an external dependecny and import it as a text and inject the text in the <style> tag of the web component.
After it is an external dependency only one instance of the CSS framework is needed (in the app).

But I don’t like so much inline css code. I would be much cooler if it would be just a <link> reference to the file. My idea was, if I would get the Path of the extracted CSS File in the app, I could give the URL into the Web Component via a API.

[alexander-akait]

@Hanterdro Hard to understand, because i am not familiar with web components, maybe this loader can solve your problem https://github.com/webpack-contrib/polymer-webpack-loader?

[Rincewind3d]

Not really, we don’t use Polymer. We do vanilla Web Components.

This is a basic problem of Webpack. It is not possible in Webpack to include a CSS file on an other place than the body if you use the html-webpack-plugin in combination with a extract text/css plugin.
The link tag will be always placed into the body. But for web components I need the ´link` tag in the web component, because of the style scoping of the Shadow DOM.

However, after Web Compoents are probably the future it would be a good investment to have look at them. But don’t waste time with Polymer 2. Polymere 2 is a mess and not very Webpack friendly. Polymere 3 is coming soon and much Webpack friendlier. SkateJs is very similar of what Polymer 3 will become. But my advice is, have first a look at VanillaJs Web Components:
https://developer.mozilla.org/de/docs/Web/Web_Components
https://developers.google.com/web/fundamentals/web-components/

Web Components are a collection of different technologies. I think the most important ones are
custom elemtents and shadow dom.
HTML imports and HTML templates can be ignored (Polymere 2 uses them, thats why Polymer 2 is so bad... they complete drop both in Polymer 3).

[alexander-akait]

@Hanterdro Hm, looks like web-components-webpack-loader, we can start this if you have idea around implementation

[michael-ciniawsky]

Getting the path is not possible, either use the css-loader directly to inline the scoped CSS within the webcomponent or write it there directly in the first place if style encapsulation is the goal :). It's out of the plugin's purpose and scope to support this

[emilecantin]

@michael-ciniawsky I have another use-case where this would be useful: I do server-side rendering, and I get a FOUC whenever I extract my CSS in a separate file. To avoid the FOUC, I'd need to know the extracted file's path, and include the proper link tag server-side.

Can't this path be returned when you import? (e.g: import myStylesUrl from './my-styles.css') file-loader does it.