From 49a5b478557f56f528db01cc01923f0654a6847e Mon Sep 17 00:00:00 2001 From: yugasun Date: Thu, 15 Nov 2018 11:40:41 +0800 Subject: [PATCH] fix: when building, style.css can not extract out bug --- meta.js | 5 + .../.electron-vue/webpack.renderer.config.js | 105 ++++++++++++------ template/.electron-vue/webpack.web.config.js | 95 ++++++++++------ template/package.json | 4 + 4 files changed, 140 insertions(+), 69 deletions(-) diff --git a/meta.js b/meta.js index 79e14573..42068242 100644 --- a/meta.js +++ b/meta.js @@ -76,6 +76,11 @@ module.exports = { message: 'Use Sass / Scss?', required: true }, + useless: { + type: 'confirm', + message: 'Use Less?', + required: true + }, plugins: { type: 'checkbox', message: 'Select which Vue plugins to install', diff --git a/template/.electron-vue/webpack.renderer.config.js b/template/.electron-vue/webpack.renderer.config.js index 35f5870d..ab5f1b32 100644 --- a/template/.electron-vue/webpack.renderer.config.js +++ b/template/.electron-vue/webpack.renderer.config.js @@ -12,6 +12,64 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const { VueLoaderPlugin } = require('vue-loader') +const isProd = process.env.NODE_ENV === 'production' + +const styleLoaders = isProd ? [ + {{#if usesass}} + { + test: /\.scss$/, + use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], + }, + { + test: /\.sass$/, + use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'], + }, + {{/if}} + {{#if useless}} + { + test: /\.less$/, + use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'], + }, + {{/if}} + { + test: /\.css$/, + use: [MiniCssExtractPlugin.loader, 'css-loader'], + } +] : [ + {{#if usesass}} + { + test: /\.scss$/, + use: ['vue-style-loader', 'css-loader', 'sass-loader'], + }, + { + test: /\.sass$/, + use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'], + }, + {{/if}} + {{#if useless}} + { + test: /\.less$/, + use: ['vue-style-loader', 'css-loader', 'less-loader'], + }, + {{/if}} + { + test: /\.css$/, + use: ['vue-style-loader', 'css-loader'], + } +]; + +{{#if eslint}}const createLintingRule = () => ({ + test: /\.(js|vue)$/, + enforce: 'pre', + exclude: /node_modules/, + use: { + loader: 'eslint-loader', + options: { + formatter: require('eslint-friendly-formatter') + } + } +}){{/if}} + /** * List of node_modules to include in webpack bundle * @@ -31,37 +89,10 @@ let rendererConfig = { ], module: { rules: [ -{{#if eslint}} - { - test: /\.(js|vue)$/, - enforce: 'pre', - exclude: /node_modules/, - use: { - loader: 'eslint-loader', - options: { - formatter: require('eslint-friendly-formatter') - } - } - }, -{{/if}} - {{#if usesass}} - { - test: /\.scss$/, - use: ['vue-style-loader', 'css-loader', 'sass-loader'] - }, - { - test: /\.sass$/, - use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'] - }, - {{/if}} - { - test: /\.less$/, - use: ['vue-style-loader', 'css-loader', 'less-loader'] - }, - { - test: /\.css$/, - use: ['vue-style-loader', 'css-loader'] - }, + {{#if eslint}} + ...(!isProd ? [createLintingRule()] : []), + {{/if}} + ...styleLoaders, { test: /\.html$/, use: 'vue-html-loader' @@ -80,7 +111,7 @@ let rendererConfig = { use: { loader: 'vue-loader', options: { - extractCSS: process.env.NODE_ENV === 'production', + extractCSS: isProd, loaders: { sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', scss: 'vue-style-loader!css-loader!sass-loader', @@ -120,8 +151,8 @@ let rendererConfig = { ] }, node: { - __dirname: process.env.NODE_ENV !== 'production', - __filename: process.env.NODE_ENV !== 'production' + __dirname: !isProd, + __filename: !isProd }, plugins: [ new VueLoaderPlugin(), @@ -134,7 +165,7 @@ let rendererConfig = { removeAttributeQuotes: true, removeComments: true }, - nodeModules: process.env.NODE_ENV !== 'production' + nodeModules: !isProd ? path.resolve(__dirname, '../node_modules') : false }), @@ -159,7 +190,7 @@ let rendererConfig = { /** * Adjust rendererConfig for development settings */ -if (process.env.NODE_ENV !== 'production') { +if (!isProd) { rendererConfig.plugins.push( new webpack.DefinePlugin({ '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` @@ -170,7 +201,7 @@ if (process.env.NODE_ENV !== 'production') { /** * Adjust rendererConfig for production settings */ -if (process.env.NODE_ENV === 'production') { +if (isProd) { rendererConfig.devtool = '' rendererConfig.plugins.push( diff --git a/template/.electron-vue/webpack.web.config.js b/template/.electron-vue/webpack.web.config.js index 3b3b2ca8..72a2d4bd 100644 --- a/template/.electron-vue/webpack.web.config.js +++ b/template/.electron-vue/webpack.web.config.js @@ -11,6 +11,64 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const { VueLoaderPlugin } = require('vue-loader') +const isProd = isProd + +const styleLoaders = isProd ? [ + {{#if usesass}} + { + test: /\.scss$/, + use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], + }, + { + test: /\.sass$/, + use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'], + }, + {{/if}} + {{#if useless}} + { + test: /\.less$/, + use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'], + }, + {{/if}} + { + test: /\.css$/, + use: [MiniCssExtractPlugin.loader, 'css-loader'], + } +] : [ + {{#if usesass}} + { + test: /\.scss$/, + use: ['vue-style-loader', 'css-loader', 'sass-loader'], + }, + { + test: /\.sass$/, + use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'], + }, + {{/if}} + {{#if useless}} + { + test: /\.less$/, + use: ['vue-style-loader', 'css-loader', 'less-loader'], + }, + {{/if}} + { + test: /\.css$/, + use: ['vue-style-loader', 'css-loader'], + } +]; + +{{#if eslint}}const createLintingRule = () => ({ + test: /\.(js|vue)$/, + enforce: 'pre', + exclude: /node_modules/, + use: { + loader: 'eslint-loader', + options: { + formatter: require('eslint-friendly-formatter') + } + } +}){{/if}} + let webConfig = { devtool: '#cheap-module-eval-source-map', entry: { @@ -18,37 +76,10 @@ let webConfig = { }, module: { rules: [ -{{#if eslint}} - { - test: /\.(js|vue)$/, - enforce: 'pre', - exclude: /node_modules/, - use: { - loader: 'eslint-loader', - options: { - formatter: require('eslint-friendly-formatter') - } - } - }, -{{/if}} - {{#if usesass}} - { - test: /\.scss$/, - use: ['vue-style-loader', 'css-loader', 'sass-loader'] - }, - { - test: /\.sass$/, - use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'] - }, - {{/if}} - { - test: /\.less$/, - use: ['vue-style-loader', 'css-loader', 'less-loader'] - }, - { - test: /\.css$/, - use: ['vue-style-loader', 'css-loader'] - }, + {{#if eslint}} + ...(!isProd ? [createLintingRule()] : []), + {{/if}} + ...styleLoaders, { test: /\.html$/, use: 'vue-html-loader' @@ -131,7 +162,7 @@ let webConfig = { /** * Adjust webConfig for production settings */ -if (process.env.NODE_ENV === 'production') { +if (isProd) { webConfig.devtool = '' webConfig.plugins.push( diff --git a/template/package.json b/template/package.json index 3c5472f3..684f4c95 100644 --- a/template/package.json +++ b/template/package.json @@ -152,6 +152,10 @@ "node-sass": "^4.9.2", "sass-loader": "^7.0.3", {{/if}} + {{#if useless}} + "less": "^3.8.1", + "less-loader": "^4.1.0", + {{/if}} "style-loader": "^0.21.0", "url-loader": "^1.0.1", "vue-html-loader": "^1.2.4",