search

afterwind-io / preprocessor-loader

Bring the awesome "Conditional Compilation" to the Webpack, and more.
MIT License
40 stars 12 forks source link

Introduction of using for other types of file #5

Closed cowardcalf closed 4 years ago

cowardcalf commented 4 years ago

Hi, @afterwind-io

Is there any chance you could introduce how can I config the loader for the .html, .scss and other types of source files?

Thanks.

afterwind-io commented 4 years ago

@cowardcalf The loader doesn't have any so-called Global Context. You can write the config like this:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // Other loaders...
          {
            loader: 'webpack-preprocessor-loader',
            // Options...
          },
        ],
      },
      {
        test: /\.html$/,
        use: [
          // Other loaders...
          {
            loader: 'webpack-preprocessor-loader',
            // Options...
          },
        ],
      },
      // Other rules...
    ],
  },
};

After all the loader is just a plain function, which takes file as string, and outputs the processed result.

cowardcalf commented 4 years ago

@afterwind-io Thanks for that. I've found that it has a similar issue when parsing the .scss files (not testing the html).

I've followed the config and adding extra empty line at the end of the .scss, and it works.

I guess you may need to fix it for the .scss, .html and the other as well?

afterwind-io commented 4 years ago

@cowardcalf This specific problem is irrelevant to the file format nor config.

I just set up a new empty project, tested the v1.1.1 and it works. Please make sure updating to the latest version. Maybe uninstall it first then reinstall and check the version listed in the package.json. It should be ^v1.1.1.

If the problem still exists, would you please providing some minimum samples of the config and the file you're dealing with?

cowardcalf commented 4 years ago

Hi, @afterwind-io Thanks for your reply.

First of all, I'm sure I'm using the v1.1.1.

Second, with the v1.1.1, it does work with the .js files without any extra empty line. But it doesn't work for .scss/.css file.

Please see the demo repo forked and modified from https://github.com/sanchan/react-simple-boilerplate. Note: adding an extra line at the end of /src/css/index.css, the error will be gone.

The error is like below: image

Thanks.

afterwind-io commented 4 years ago

@cowardcalf The problem in #4 does still exist. I have reopened the issue.

cowardcalf commented 4 years ago

@cowardcalf The problem in #4 does still exist. I have reopened the issue.

No worries. Thanks for your patience and quick response.