extract-loader icon indicating copy to clipboard operation
extract-loader copied to clipboard

Is this loader maintained?

Open StudioMaX opened this issue 3 years ago • 4 comments

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?

StudioMaX avatar May 13 '21 17:05 StudioMaX

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.

MaximeCheramy avatar Sep 20 '22 21:09 MaximeCheramy

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()],
        },
      },
    }
  ],
},

denizguzel avatar Nov 15 '22 13:11 denizguzel

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.

Mario-Eis avatar Dec 13 '23 13:12 Mario-Eis

My config is that can help people:

 resourceQuery: /file/, // foo.css?file
        use: [{
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                postcssUrl({ url: 'inline' })
              ]
            }
          }

MaximeCheramy avatar Jan 22 '24 15:01 MaximeCheramy