@alifd/next-theme-loader

A webpack loader for injecting scss variables of theme package to scss file.

Install

npm install babel-plugin-import --save-dev
npm install @alifd/next-theme-loader --save-dev
npm install @alifd/next-theme-webpack-plugin --save-dev

Usage

webpack 2+

1const path = require('path');
2const webpack = require('webpack');
3const ExtractTextPlugin = require('extract-text-webpack-plugin');
4const ThemePlugin = require('@alifd/next-theme-webpack-plugin');
5
6module.exports = {
7  entry: {
8    index: './src/index.jsx'
9  },
10  output: {
11    path: path.join(__dirname, 'build'),
12    filename: '[name].js'
13  },
14  resolve: {
15    extensions: ['.js', '.jsx']
16  },
17  devtool: 'inline-source-map',
18  module: {
19    rules: [{
20      test: /\.jsx?$/,
21      use: {
22        loader: 'babel-loader',
23        options: {
24          presets: [
25            'env',
26            'react',
27            'stage-0'
28          ],
29          plugins: [
30            'add-module-exports',
31            'transform-decorators-legacy',
32            ['babel-plugin-import', { style: true }]
33          ]
34        }
35      },
36      exclude: /node_modules/
37    }, {
38      test: /\.css$/,
39      use: ExtractTextPlugin.extract({
40        use: 'css-loader'
41      })
42    }, {
43      test: /\.scss$/,
44      use: ExtractTextPlugin.extract({
45        use: [
46          'css-loader',
47          'fast-sass-loader',
48          {
49            loader: '@alifd/next-theme-loader',
50            options: {
51              theme: '@alifd/theme-package', /* variables only modified (optional)*/
52              modifyVars: {'$css-prefix': 'my-'} /* custom variable (optional) */
53            }
54          }
55        ]
56      })
57    }]
58  },
59  plugins: [
60    new ThemePlugin({ theme: '@alifd/theme-package' }),
61    new ExtractTextPlugin('[name].css')
62  ]
63};

webpack 1

webpack.config.js

1const path = require('path');
2const webpack = require('webpack');
3const ExtractTextPlugin = require('extract-text-webpack-plugin');
4const ThemePlugin = require('@alifd/next-theme-webpack-plugin');
5
6module.exports = {
7  entry: {
8    index: './src/index.jsx'
9  },
10  output: {
11    path: path.join(__dirname, 'build'),
12    filename: '[name].js'
13  },
14  resolve: {
15    extensions: ['', '.js', '.jsx']
16  },
17  devtool: 'inline-source-map',
18  module: {
19    loaders: [{
20      test: /\.jsx?$/,
21      loader: 'babel',
22      query: {
23        presets: [
24          'es2015',
25          'react',
26          'stage-0'
27        ],
28        plugins: [
29          'add-module-exports',
30          'transform-decorators-legacy',
31          ['babel-plugin-import', { style: true }]
32        ]
33      },
34      exclude: /node_modules/
35    }, {
36      test: /\.css$/,
37      loaders: ExtractTextPlugin.extract('css')
38    }, {
39      test: /\.scss$/,
40      loader: ExtractTextPlugin.extract('css!fast-sass!@alifd/next-theme-loader?theme=@alifd/theme-package')
41    }]
42  },
43  plugins: [
44    new ThemePlugin({ theme: '@alifd/theme-package' }),
45    new ExtractTextPlugin('[name].css')
46  ]
47};

Query

• theme(String): theme package(eg: @alifd/theme-1) which come from https://fusion.design
• base(String): package with all variables (eg: @alifd/next)
• modifyVars(String/Object): inject some variables, such as: $css-prefix or $icon-font-path, value may be the following two types
  • { '$css-prefix': '"my-"' }
  • path.join(__dirname, 'variable.scss'), it should be an absolute path

Note: if you want to set modifyVars to object under webpack1, you should write as below:

1{
2  test: /\.scss$/,
3  loader: ExtractTextPlugin.extract(`css!sass!@alifd/next-theme-loader?${JSON.stringify({ theme: '@alifd/theme-package', modifyVars: { '$css-prefix': '"my-"', '$icon-font-path': '"//xxx.com"' } })}`)
4}