wut1 / styleText-loader

获取css 样式字符串 并支持cssmodule

StyleText Loader

styletext-loader

get CSS text and support css module.

Getting Started

To begin, you'll need to install styletext-loader:

npm install --save-dev styletext-loader

It's recommended to combine styletext-loader with the css-loader

Then add the loader to your webpack config. For example:

style.css

body {
  background: green;
}

component.js

import { cssText, styles} from './style.css';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['styletext-loader', 'css-loader'],
      },
    ],
  },
};

Options

Name	Type	Default	Description
esModule	{Boolean}	false	Use ES modules syntax

esModule

Type: Boolean Default: false

By default, styletext-loader generates JS modules that use the CommonJS modules syntax. There are some cases in which using ES modules is beneficial, like in the case of module concatenation and tree shaking.

You can enable a ES module syntax using:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'styletext-loader',
            options: { esModule: true },
          },
          {
            loader: 'css-loader',
            options: { modules: false,esModule:true }
          },
        ]
      },
    ],
  },
};