From 5b24fc1cfc170ec305ae564b7cbeed946fcdd68a Mon Sep 17 00:00:00 2001 From: yugasun Date: Thu, 15 Nov 2018 14:20:31 +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 + tests/builds.json | 9 ++ tests/scaffold.js | 15 +-- 6 files changed, 157 insertions(+), 76 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", diff --git a/tests/builds.json b/tests/builds.json index 56cd2a55..459ad680 100644 --- a/tests/builds.json +++ b/tests/builds.json @@ -11,6 +11,7 @@ "\n", "\n", "\n", + "\n", "\n" ], "eslint-airbnb": [ @@ -21,6 +22,7 @@ "\n", "\n", "\n", + "\n", "\u001b[B\n", "\n", "\n", @@ -35,6 +37,7 @@ "\n", "\n", "\n", + "\n", "\u001b[B\u001b[B\n", "\n", "\n", @@ -47,6 +50,7 @@ "\n", "\n", "\n", + "\n", "\u001b[B\u001b[B \n", "\n", "\n", @@ -61,6 +65,7 @@ "\n", "\n", "\n", + "\n", "\u001b[B\u001b[B\u001b[B \n", "\n", "\n", @@ -75,6 +80,7 @@ "\n", "\n", "\n", + "\n", "\u001b[B\u001b[B \u001b[B \n", "\n", "\n", @@ -92,6 +98,7 @@ "\n", "\n", "\n", + "\n", "n\n", "\n", "\n", @@ -107,6 +114,7 @@ "\n", "\n", "\n", + "\n", "n\n", "\n", "\n" @@ -122,6 +130,7 @@ "\n", "\n", "\n", + "\n", "\u001b[B\n", "\n" ] diff --git a/tests/scaffold.js b/tests/scaffold.js index babe233d..dbe30801 100644 --- a/tests/scaffold.js +++ b/tests/scaffold.js @@ -26,13 +26,14 @@ function generate (key, build) { .when(/Application Version/g).respond(build[2]) .when(/Project description/g).respond(build[3]) .when(/Scss/g).respond(build[4]) - .when(/plugins/g).respond(build[5]) - .when(/ESLint/g).respond(build[6]) - .when(/config/g).respond(build[7]) - .when(/unit/g).respond(build[8]) - .when(/end-to-end/g).respond(build[9]) - .when(/build tool/g).respond(build[10]) - .when(/author/g).respond(build[11]) + .when(/Less/g).respond(build[5]) + .when(/plugins/g).respond(build[6]) + .when(/ESLint/g).respond(build[7]) + .when(/config/g).respond(build[8]) + .when(/unit/g).respond(build[9]) + .when(/end-to-end/g).respond(build[10]) + .when(/build tool/g).respond(build[11]) + .when(/author/g).respond(build[12]) .on('error', err => { console.log(err.message) })