Skip to content
Permalink
Browse files

update:css theme extract

  • Loading branch information...
hiyangguo committed Apr 20, 2018
1 parent e48aed9 commit 1509f94524626331731893253aec2d2ce6936911
Showing with 48 additions and 8 deletions.
  1. +3 −0 src/index.js
  2. +5 −0 src/less/index.less
  3. +3 −0 src/less/themes/green.less
  4. +3 −0 src/less/themes/red.less
  5. +3 −0 src/less/themes/yellow.less
  6. +31 −8 webpack.config.js
@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom';

// style
import './less/index.less';
import './less/themes/green.less';
import './less/themes/red.less';
import './less/themes/yellow.less';

import App from './App';

@@ -0,0 +1,5 @@
@base-color: #03a9f4;

body {
background-color: @base-color;
}
@@ -0,0 +1,3 @@
@import "../index";

@base-color: #4caf50;
@@ -0,0 +1,3 @@
@import "../index";

@base-color: #F44336;
@@ -0,0 +1,3 @@
@import "../index";

@base-color: #ffeb3b;
@@ -1,12 +1,36 @@
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlwebpackPlugin = require('html-webpack-plugin');

const { STYLE_DEBUG } = process.env;
// 主题路径
const THEME_PATH = './src/less/themes';

const extractLess = new ExtractTextPlugin('style.[hash].css');

const styleLoaders = [{ loader: 'css-loader' }, { loader: 'less-loader' }];

const resolveToThemeStaticPath = fileName => path.resolve(THEME_PATH, fileName);
const themeFileNameSet = fs.readdirSync(path.resolve(THEME_PATH));
const themePaths = themeFileNameSet.map(resolveToThemeStaticPath);
const getThemeName = fileName => `theme-${path.basename(fileName, path.extname(fileName))}`;

// 全部 ExtractLessS 的集合
const themesExtractLessSet = themeFileNameSet.map(fileName => new ExtractTextPlugin(`${getThemeName(fileName)}.css`))
// 主题 Loader 的集合
const themeLoaderSet = themeFileNameSet.map((fileName, index) => {
return {
test: /\.(less|css)$/,
include: resolveToThemeStaticPath(fileName),
loader: themesExtractLessSet[index].extract({
use: styleLoaders
})
}
});


module.exports = {
devServer: {
contentBase: path.join(__dirname, 'public'),
@@ -36,14 +60,9 @@ module.exports = {
},
{
test: /\.(less|css)$/,
exclude: themePaths,
loader: extractLess.extract({
use: [
{
loader: 'css-loader',
}, {
loader: 'less-loader'
}
],
use: styleLoaders,
// use style-loader in development
fallback: 'style-loader?{attrs:{prop: "value"}}'
})
@@ -55,11 +74,15 @@ module.exports = {
loader: 'html-loader'
}
]
}
},
// 将Loader 的集合,加入 rules
...themeLoaderSet
]
},
plugins: [
extractLess,
// 将所有的 themesExtractLess 加入 plugin
...themesExtractLessSet,
new webpack.NamedModulesPlugin(),
new HtmlwebpackPlugin({
title: 'webpack 多主题打包演示',

0 comments on commit 1509f94

Please sign in to comment.
You can’t perform that action at this time.