themes css content is null

zhangy0510 commented 5 years ago

created themes css content is null. Why. How to resolve it. Please tell me, thank you.

multipleThemesCompile({ themesConfig: { green: { color: '#008000' }, yellow: { color: '#ffff00' } }, styleLoaders: [ { loader: 'css-loader' }, { loader: 'less-loader' } ], lessContent: 'body{color:@color}', cwd: path.resolve('./'), cacheDir: './src/less/themes', outputName:themeName => ${themeName}.css })

hiyangguo commented 5 years ago

Can you probvide your webpack config for me? @zhangy0510

zhangy0510 commented 5 years ago

参照【webpack-mutiple-theme-bundle-css-demo】改成下面这样，生成的css文件还是空的，麻烦看下，非常感谢~

const path = require("path"); const fs = require('fs'); const helpers = require('./helpers'); const AOT = helpers.hasNpmFlag('aot'); const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const FastUglifyJsPlugin = require('fast-uglifyjs-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin') const DefinePlugin = require('webpack/lib/DefinePlugin'); const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); const ngcWebpack = require('ngc-webpack'); const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin'); const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 拆分css样式的插件 // const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const AssetsPlugin = require('assets-webpack-plugin'); // const CompressionPlugin = require("compression-webpack-plugin"); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const merge = require('webpack-merge'); const multipleThemesCompile = require('webpack-multiple-themes-compile'); // const themes = require('../src/less/themes.config.js'); 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)).filter(fileName => /.less/.test(fileName)); const themePaths = themeFileNameSet.map(resolveToThemeStaticPath); console.log("themePaths-----------------" + themePaths); 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 = { mode: 'production', entry: { 'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts', 'vendor': './src/vendor.ts', 'polyfills': './src/polyfills.browser.ts', 'themes': './src/less/themes/themes.js' }, /**

Options affecting the resolving of modules.
See: http://webpack.github.io/docs/configuration.html#resolve */ resolve: {

/**
- An array of extensions that should be used to resolve modules.
- See: http://webpack.github.io/docs/configuration.html#resolve-extensions */ extensions: ['.ts', '.js', '.json'], }, externals: { echarts:"echarts" }, performance: { hints: "warning" },

/**

Options affecting the output of the compilation.
See: http://webpack.github.io/docs/configuration.html#output */ output: { path: helpers.root('dist'), publicPath:'./', filename: '[name].[chunkhash].bundle.js', chunkFilename: '[name].[chunkhash].chunk.js' },

optimization: { runtimeChunk: { name: 'manifest' }, minimizer: [ new FastUglifyJsPlugin({ compress: { warnings: false }, debug: false, cache: true, cacheFolder: path.resolve(__dirname, '.otherFolder'), exclude: /node_modules/, sourceMap:false }), new OptimizeCSSAssetsPlugin({ assetNameRegExp: /.css$/g, cssProcessorOptions: { safe: true, autoprefixer: { disable: true }, mergeLonghand: false, discardComments: { removeAll: true // 移除注释 } }, canPrint: true }), ],

splitChunks: { chunks: 'initial', cacheGroups: { commons: { test: /[\/]node_modules[\/]/, name: "commons", minChunks: 1, //被不同entry引用次数(import),1次的话没必要提取 maxInitialRequests: 5, minSize: 0, priority: 100, }, } } },

module: { rules: [ { test: /.js$/, loader: "babel-loader?cacheDirectory=true", include: [helpers.root('src/assets')], exclude: /node_modules/, },

/**
- Typescript loader support for .ts
- Component Template/Style integration using angular2-template-loader
- Angular 2 lazy loading (async routes) via ng-router-loader
- ng-router-loader expects vanilla JavaScript code, not TypeScript code. This is why the
- order of the loader matter.
- See: https://github.com/s-panferov/awesome-typescript-loader
- See: https://github.com/TheLarkInn/angular2-template-loader
- See: https://github.com/shlomiassaf/ng-router-loader */ { test: /.ts$/, use: [ { // MAKE SURE TO CHAIN VANILLA JS CODE, I.E. TS COMPILATION OUTPUT. loader: 'ng-router-loader', options: { loader: 'async-import', genDir: 'compiled', aot: AOT } }, { loader: 'awesome-typescript-loader', options:{ configFileName:'tsconfig.aot.json', } }, { loader: 'angular2-template-loader' } ], include: [helpers.root('src'), helpers.root('compiled')], exclude: [/.(spec|e2e).ts$/] }, { test: /.css$/, use: [ MiniCssExtractPlugin.loader, "css-loader" ], include: [helpers.root('src/assets')], },
  
  /**
- to string and css loader support for *.css files (from Angular components)
- Returns file content as string
- / { // test: /.(less|css)$/, test: /.css$/, use: ['to-string-loader','css-loader' ], exclude: [ helpers.root('src/assets')] }, { test: /.less$/, exclude: themePaths, loader: extractLess.extract({ use: styleLoaders, // use style-loader in development fallback: 'style-loader?{attrs:{prop: "value"}}' }) }, // 将Loader 的集合，加入 rules ...themeLoaderSet, { test: /.(eot|woff2?|ttf)([\?]?.)$/, use: "url-loader?mimetype=application/font-woff&name=assets/fonts/font/[name].[hash:8].[ext]&limit=8192", exclude: /node_modules/, }, { test: /.(jpg|png|gif|svg)(\?v=[0-9].[0-9].[0-9])?$/, use: "file-loader?name=assets/images/image/[name].[hash:8].[ext]&limit=8192", exclude: /node_modules/, },
  
  /**
- Json loader support for *.json files.
- See: https://github.com/webpack/json-loader */ { test: /.json$/, use: 'json-loader' },
  
  /* Raw loader support for *.html
- Returns file content as string
- See: https://github.com/webpack/raw-loader */ { test: /.html$/, use: 'raw-loader', exclude: [helpers.root('src/index.html')] },
] }, plugins: [ extractLess, // 将所有的 themesExtractLess 加入 plugin ...themesExtractLessSet,

new webpack.NamedModulesPlugin(), new MiniCssExtractPlugin({ filename: "style.[hash:8].css", chunkFilename: "[id].[hash:8].css", }),

new AssetsPlugin({ path: helpers.root('dist'), filename: 'webpack-assets.json', prettyPrint: true }), /**
- 插件: ForkCheckerPlugin
- 描述: Do type checking in a separate process, so webpack don't need to wait.
- 详见: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse */ new CheckerPlugin(), /**
  - 插件: ContextReplacementPlugin
  - 描述: Provides context to Angular's use of System.import
  - 详见: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
  - 具体解决的问题可参见如下issue
  - See: https://github.com/angular/angular/issues/11580 / new ContextReplacementPlugin( // The (\|\/) piece accounts for path separators in nix and Windows /angular(\|\/)core(\|\/)src(\|\/)linker/, helpers.root('src'), // location of your src { // your Angular Async Route paths relative to this root directory } ), /**
  - 插件: CopyWebpackPlugin
  - 描述: Copy files and directories in webpack.
  - Copies project static assets.
  - 详见: https://www.npmjs.com/package/copy-webpack-plugin */ new CopyWebpackPlugin([ { from: helpers.root('src/assets'), to: helpers.root('dist/assets'), ignore: [helpers.root('src/assets/webpackTools') ] }, { from: 'node_modules/zone.js/dist/zone.js',to:helpers.root('dist/assets/js') }, { from: 'node_modules/tools.js/tools.js',to:helpers.root('dist/assets/js') } ]),
new HtmlWebpackPlugin({ hash: false, template: "./src/index.html", inject: true, excludeChunks: ['themes'] }), new webpack.DefinePlugin({ 'process.env.themes': JSON.stringify(themeFileNameSet.map(fileName => fileName.replace('.less', ''))) }), /**
- 插件: HtmlWebpackIncludeAssetsPlugin
- 描述: 可以注入一些webpackHtmlPlugin不能检测到的css/js资源到模版文件中。
- 详见: https://github.com/jharris4/html-webpack-include-assets-plugin */ new HtmlWebpackIncludeAssetsPlugin({ assets: ['assets/js/zone.js', 'assets/js/tools.js'], append: false }),
new webpack.optimize.RuntimeChunkPlugin({ // 打包和webpack打包相关的代码 name: 'runtime' }),

new CleanWebpackPlugin(['config/.otherFolder'], { root: helpers.root('./'), }), // new BundleAnalyzerPlugin(), ] };

// module.exports = merge( // webpackConfigs, // multipleThemesCompile({ // themesConfig: themes, // // lessContent: 'body{color:@color}', // // styleLoaders: [ // // // { loader: 'style-loader'}, // // { loader: 'css-loader' }, // // { // // loader: 'less-loader' // // } // // ], // cwd: path.resolve('./'), // cacheDir: './src/less/themes' // }) // multipleThemesCompile({ // themesConfig: themes, // styleLoaders: [ // { loader: 'css-loader' }, // { // loader: 'less-loader?javascriptEnabled=true' // } // ], // lessContent: 'body{color:@mainColor}', // cwd: helpers.root('./'), // // cacheDir: 'src/less/themes', // // outputName:themeName => ${themeName}.css // }) // );

hiyangguo commented 5 years ago

@zhangy0510 你先把split chunk去掉试试。

zhangy0510 commented 5 years ago

好的，谢谢

zhangy0510 commented 5 years ago

请问下，哪一段脚本是进行less转css的啊？

zhangy0510 commented 5 years ago

split chunk去掉之后生成的css还是没有内容

hiyangguo commented 5 years ago

https://github.com/rsuite/webpack-multiple-themes-compile/blob/master/src/index.js#L43

hiyangguo commented 5 years ago

@zhangy0510 把你那些处理 css 和 less 的 loader 都删掉。所有的样式都交给 multipleThemesCompile 处理。

zhangy0510 commented 4 years ago

已经解决了，谢谢~

rsuite / webpack-multiple-themes-compile

themes css content is null #1