extract-loader
extract-loader copied to clipboard
Is this loader maintained?
I apologize for asking this question.
Now this loader has several unresolved issues related to webpack 5.x (https://github.com/peerigon/extract-loader/issues/102, https://github.com/peerigon/extract-loader/issues/95) and css-loader 5.x (https://github.com/peerigon/extract-loader/issues/99). The last commits were in May 2020.
I recently started upgrading to webpack 5 due to a recently discovered vulnerability in the already unsupported postcss 7.x - this version is required when working with loaders in webpack 4 through the dependency chain. Unfortunately, now I cannot upgrade to webpack 5, as it seems that extract-loader has not been tested to work correctly with the newest dependencies.
In this regard, my question is whether we should expect updates in the future?
I'm using this project because I need to extract the CSS as a file to pass it to a library that requires a CSS URL.
Is there any alternative to achieve this? Seems that css-loader is generating a JS file, so I can't use it as a resource directly. And I don't think that I can use mini-css-extract-plugin for this.
Edit:
Fixed by replacing css-loader > extract-loader by simply using postcss-loader.
I'm using this project because I need to extract the CSS as a file to pass it to a library that requires a CSS URL.
Is there any alternative to achieve this? Seems that css-loader is generating a JS file, so I can't use it as a resource directly. And I don't think that I can use mini-css-extract-plugin for this.
Edit:
Fixed by replacing css-loader > extract-loader by simply using postcss-loader.
Yeah I was using the css-loader and extract-loader too but it seems unnessesary. Below code just works fine without css-loader and extract-loader.
const postcssPresetEnv = require('postcss-preset-env');
const sass = require('sass');
{
test: /\.(sass|scss)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].css',
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-import', postcssPresetEnv()],
},
},
},
{
loader: 'sass-loader',
options: {
// Prefer `dart-sass`
implementation: sass,
sourceMap: false,
sassOptions: {
includePaths: ['node_modules', 'apps', '.'],
},
},
},
],
},
{
test: /\.css$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].css',
},
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-import', postcssPresetEnv()],
},
},
}
],
},
But postcss-loader doesn't seem to process url(...) as require/import. I have to load fonts in the css. And woff2 files need to be handled.
My config is that can help people:
resourceQuery: /file/, // foo.css?file
use: [{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
postcssUrl({ url: 'inline' })
]
}
}