Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is this loader maintained? #107

Open
StudioMaX opened this issue May 13, 2021 · 4 comments
Open

Is this loader maintained? #107

StudioMaX opened this issue May 13, 2021 · 4 comments

Comments

@StudioMaX
Copy link

I apologize for asking this question.

Now this loader has several unresolved issues related to webpack 5.x (#102, #95) and css-loader 5.x (#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?

@MaximeCheramy
Copy link

MaximeCheramy commented Sep 20, 2022

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.

@denizguzel
Copy link

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

@Mario-Eis
Copy link

Mario-Eis commented Dec 13, 2023

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.

@MaximeCheramy
Copy link

My config is that can help people:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants