fix: when building, style.css can not extract out bug

SimulatedGREG · Nov 15, 2018 · 5b24fc1 · 5b24fc1
1 parent 8fae476
commit 5b24fc1
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 76 deletions.
diff --git 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
@@ -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
@@ -11,44 +11,75 @@ 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: {
     web: path.join(__dirname, '../src/renderer/main.js')
   },
   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
@@ -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
@@ -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
@@ -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)
   })