Skip to content

Commit

Permalink
update:css theme extract
Browse files Browse the repository at this point in the history
  • Loading branch information
hiyangguo committed Apr 20, 2018
1 parent e48aed9 commit 1509f94
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 8 deletions.
3 changes: 3 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
5 changes: 5 additions & 0 deletions src/less/index.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@base-color: #03a9f4;

body {
background-color: @base-color;
}
3 changes: 3 additions & 0 deletions src/less/themes/green.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import "../index";

@base-color: #4caf50;
3 changes: 3 additions & 0 deletions src/less/themes/red.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import "../index";

@base-color: #F44336;
3 changes: 3 additions & 0 deletions src/less/themes/yellow.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import "../index";

@base-color: #ffeb3b;
39 changes: 31 additions & 8 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -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'),
Expand Down Expand Up @@ -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"}}'
})
Expand All @@ -55,11 +74,15 @@ module.exports = {
loader: 'html-loader'
}
]
}
},
// 将Loader 的集合,加入 rules
...themeLoaderSet
]
},
plugins: [
extractLess,
// 将所有的 themesExtractLess 加入 plugin
...themesExtractLessSet,
new webpack.NamedModulesPlugin(),
new HtmlwebpackPlugin({
title: 'webpack 多主题打包演示',
Expand Down

0 comments on commit 1509f94

Please sign in to comment.