webpack-css-themes-plugin-legacy v0.6.0

Webpack-css-themes-plugin-legacy

English / 简体中文

Intro

Compile once and output multiple theme style sheets

• Support webpack multiple entries
• Support sass/less
• Theme files can only contain variables
• Theme files can refer to other files, including file in node_modules
• Build on demand, theme file will be injected into the style files used by project
• Support asynchronous chunks

This project is inpired by mini-css-extract-plugin

Requirement

• Webpack: \^3.0.0
• less-loader: "\^4.1.0"
• sass-loader: "\^7.3.1"

How to Use

const WebpackCSSThemesPlugin = require('webpack-css-themes-plugin')

const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true
              }
            },
          }
        ],
      },
      {
        test: /\.css$/i,
        use: 'css-loader'
      }
    ],
  },
  plugins: [
    new WebpackCSSThemesPlugin({
      themes: [{
        name: 'default',
        entryPath: path.resolve(__dirname, 'src/theme/index.less')
      }]
    }),
    // exclude css inject
    new HtmlWebpackPlugin({
      excludeAssets: [/\.css$/],
      template: path.resolve(__dirname, './index.html'),
    }),
    new HtmlWebpackExcludeAssetsPlugin()
  ],
}

Notice

1. There is no need to reference src/theme/index.less in the project unless your project style sheet needs the variables in it.
2. This plugin replaces extract-text-plugin/mini-css-extract-plugin, please do not use it together.
3. If you use html-webpack-plugin, you need to filter out the CSS injection.

Get more usage from test cases.

Options

themes

Type: Array<theme>

• theme.name(Type string?): name of your theme
• theme.entryPath(Type string): absolute path of your theme entry
• theme.distFilename(Type string?): output file name for your theme, default: [name].css.

pre-processor

Type: string

less or sass, default less.

publicPath

Type: String|Function

It will be the publicPath of the project by default.

When is a function, and the input parameters are:

• resourcePath: absolute path of resourcePath
• rootContext: webpack's resource Context