Skip to content
This repository was archived by the owner on Oct 4, 2023. It is now read-only.

Commit 75c4f70

Browse files
yugasunyugasun
committed
fix: when building, style.css can not extract out bug
1 parent 8fae476 commit 75c4f70

File tree

6 files changed

+157
-76
lines changed

6 files changed

+157
-76
lines changed

‎meta.js

+5
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,11 @@ module.exports = {
7676
message: 'Use Sass / Scss?',
7777
required: true
7878
},
79+
useless: {
80+
type: 'confirm',
81+
message: 'Use Less?',
82+
required: true
83+
},
7984
plugins: {
8085
type: 'checkbox',
8186
message: 'Select which Vue plugins to install',

‎template/.electron-vue/webpack.renderer.config.js

+68-37
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,64 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
1212
const HtmlWebpackPlugin = require('html-webpack-plugin')
1313
const { VueLoaderPlugin } = require('vue-loader')
1414

15+
const isProd = process.env.NODE_ENV === 'production'
16+
17+
const styleLoaders = isProd ? [
18+
{{#if usesass}}
19+
{
20+
test: /\.scss$/,
21+
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
22+
},
23+
{
24+
test: /\.sass$/,
25+
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'],
26+
},
27+
{{/if}}
28+
{{#if useless}}
29+
{
30+
test: /\.less$/,
31+
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
32+
},
33+
{{/if}}
34+
{
35+
test: /\.css$/,
36+
use: [MiniCssExtractPlugin.loader, 'css-loader'],
37+
}
38+
] : [
39+
{{#if usesass}}
40+
{
41+
test: /\.scss$/,
42+
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
43+
},
44+
{
45+
test: /\.sass$/,
46+
use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'],
47+
},
48+
{{/if}}
49+
{{#if useless}}
50+
{
51+
test: /\.less$/,
52+
use: ['vue-style-loader', 'css-loader', 'less-loader'],
53+
},
54+
{{/if}}
55+
{
56+
test: /\.css$/,
57+
use: ['vue-style-loader', 'css-loader'],
58+
}
59+
];
60+
61+
{{#if eslint}}const createLintingRule = () => ({
62+
test: /\.(js|vue)$/,
63+
enforce: 'pre',
64+
exclude: /node_modules/,
65+
use: {
66+
loader: 'eslint-loader',
67+
options: {
68+
formatter: require('eslint-friendly-formatter')
69+
}
70+
}
71+
}){{/if}}
72+
1573
/**
1674
* List of node_modules to include in webpack bundle
1775
*
@@ -31,37 +89,10 @@ let rendererConfig = {
3189
],
3290
module: {
3391
rules: [
34-
{{#if eslint}}
35-
{
36-
test: /\.(js|vue)$/,
37-
enforce: 'pre',
38-
exclude: /node_modules/,
39-
use: {
40-
loader: 'eslint-loader',
41-
options: {
42-
formatter: require('eslint-friendly-formatter')
43-
}
44-
}
45-
},
46-
{{/if}}
47-
{{#if usesass}}
48-
{
49-
test: /\.scss$/,
50-
use: ['vue-style-loader', 'css-loader', 'sass-loader']
51-
},
52-
{
53-
test: /\.sass$/,
54-
use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
55-
},
56-
{{/if}}
57-
{
58-
test: /\.less$/,
59-
use: ['vue-style-loader', 'css-loader', 'less-loader']
60-
},
61-
{
62-
test: /\.css$/,
63-
use: ['vue-style-loader', 'css-loader']
64-
},
92+
{{#if eslint}}
93+
...(!isProd ? [createLintingRule()] : []),
94+
{{/if}}
95+
...styleLoaders,
6596
{
6697
test: /\.html$/,
6798
use: 'vue-html-loader'
@@ -80,7 +111,7 @@ let rendererConfig = {
80111
use: {
81112
loader: 'vue-loader',
82113
options: {
83-
extractCSS: process.env.NODE_ENV === 'production',
114+
extractCSS: isProd,
84115
loaders: {
85116
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
86117
scss: 'vue-style-loader!css-loader!sass-loader',
@@ -120,8 +151,8 @@ let rendererConfig = {
120151
]
121152
},
122153
node: {
123-
__dirname: process.env.NODE_ENV !== 'production',
124-
__filename: process.env.NODE_ENV !== 'production'
154+
__dirname: !isProd,
155+
__filename: !isProd
125156
},
126157
plugins: [
127158
new VueLoaderPlugin(),
@@ -134,7 +165,7 @@ let rendererConfig = {
134165
removeAttributeQuotes: true,
135166
removeComments: true
136167
},
137-
nodeModules: process.env.NODE_ENV !== 'production'
168+
nodeModules: !isProd
138169
? path.resolve(__dirname, '../node_modules')
139170
: false
140171
}),
@@ -159,7 +190,7 @@ let rendererConfig = {
159190
/**
160191
* Adjust rendererConfig for development settings
161192
*/
162-
if (process.env.NODE_ENV !== 'production') {
193+
if (!isProd) {
163194
rendererConfig.plugins.push(
164195
new webpack.DefinePlugin({
165196
'__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
@@ -170,7 +201,7 @@ if (process.env.NODE_ENV !== 'production') {
170201
/**
171202
* Adjust rendererConfig for production settings
172203
*/
173-
if (process.env.NODE_ENV === 'production') {
204+
if (isProd) {
174205
rendererConfig.devtool = ''
175206

176207
rendererConfig.plugins.push(

‎template/.electron-vue/webpack.web.config.js

+63-32
Original file line numberDiff line numberDiff line change
@@ -11,44 +11,75 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin')
1111
const HtmlWebpackPlugin = require('html-webpack-plugin')
1212
const { VueLoaderPlugin } = require('vue-loader')
1313

14+
const isProd = process.env.NODE_ENV === 'production'
15+
16+
const styleLoaders = isProd ? [
17+
{{#if usesass}}
18+
{
19+
test: /\.scss$/,
20+
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
21+
},
22+
{
23+
test: /\.sass$/,
24+
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader?indentedSyntax'],
25+
},
26+
{{/if}}
27+
{{#if useless}}
28+
{
29+
test: /\.less$/,
30+
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
31+
},
32+
{{/if}}
33+
{
34+
test: /\.css$/,
35+
use: [MiniCssExtractPlugin.loader, 'css-loader'],
36+
}
37+
] : [
38+
{{#if usesass}}
39+
{
40+
test: /\.scss$/,
41+
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
42+
},
43+
{
44+
test: /\.sass$/,
45+
use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'],
46+
},
47+
{{/if}}
48+
{{#if useless}}
49+
{
50+
test: /\.less$/,
51+
use: ['vue-style-loader', 'css-loader', 'less-loader'],
52+
},
53+
{{/if}}
54+
{
55+
test: /\.css$/,
56+
use: ['vue-style-loader', 'css-loader'],
57+
}
58+
];
59+
60+
{{#if eslint}}const createLintingRule = () => ({
61+
test: /\.(js|vue)$/,
62+
enforce: 'pre',
63+
exclude: /node_modules/,
64+
use: {
65+
loader: 'eslint-loader',
66+
options: {
67+
formatter: require('eslint-friendly-formatter')
68+
}
69+
}
70+
}){{/if}}
71+
1472
let webConfig = {
1573
devtool: '#cheap-module-eval-source-map',
1674
entry: {
1775
web: path.join(__dirname, '../src/renderer/main.js')
1876
},
1977
module: {
2078
rules: [
21-
{{#if eslint}}
22-
{
23-
test: /\.(js|vue)$/,
24-
enforce: 'pre',
25-
exclude: /node_modules/,
26-
use: {
27-
loader: 'eslint-loader',
28-
options: {
29-
formatter: require('eslint-friendly-formatter')
30-
}
31-
}
32-
},
33-
{{/if}}
34-
{{#if usesass}}
35-
{
36-
test: /\.scss$/,
37-
use: ['vue-style-loader', 'css-loader', 'sass-loader']
38-
},
39-
{
40-
test: /\.sass$/,
41-
use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
42-
},
43-
{{/if}}
44-
{
45-
test: /\.less$/,
46-
use: ['vue-style-loader', 'css-loader', 'less-loader']
47-
},
48-
{
49-
test: /\.css$/,
50-
use: ['vue-style-loader', 'css-loader']
51-
},
79+
{{#if eslint}}
80+
...(!isProd ? [createLintingRule()] : []),
81+
{{/if}}
82+
...styleLoaders,
5283
{
5384
test: /\.html$/,
5485
use: 'vue-html-loader'
@@ -131,7 +162,7 @@ let webConfig = {
131162
/**
132163
* Adjust webConfig for production settings
133164
*/
134-
if (process.env.NODE_ENV === 'production') {
165+
if (isProd) {
135166
webConfig.devtool = ''
136167

137168
webConfig.plugins.push(

‎template/package.json

+4
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,10 @@
152152
"node-sass": "^4.9.2",
153153
"sass-loader": "^7.0.3",
154154
{{/if}}
155+
{{#if useless}}
156+
"less": "^3.8.1",
157+
"less-loader": "^4.1.0",
158+
{{/if}}
155159
"style-loader": "^0.21.0",
156160
"url-loader": "^1.0.1",
157161
"vue-html-loader": "^1.2.4",

‎tests/builds.json

+9
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"\n",
1212
"\n",
1313
"\n",
14+
"\n",
1415
"\n"
1516
],
1617
"eslint-airbnb": [
@@ -21,6 +22,7 @@
2122
"\n",
2223
"\n",
2324
"\n",
25+
"\n",
2426
"\u001b[B\n",
2527
"\n",
2628
"\n",
@@ -35,6 +37,7 @@
3537
"\n",
3638
"\n",
3739
"\n",
40+
"\n",
3841
"\u001b[B\u001b[B\n",
3942
"\n",
4043
"\n",
@@ -47,6 +50,7 @@
4750
"\n",
4851
"\n",
4952
"\n",
53+
"\n",
5054
"\u001b[B\u001b[B \n",
5155
"\n",
5256
"\n",
@@ -61,6 +65,7 @@
6165
"\n",
6266
"\n",
6367
"\n",
68+
"\n",
6469
"\u001b[B\u001b[B\u001b[B \n",
6570
"\n",
6671
"\n",
@@ -75,6 +80,7 @@
7580
"\n",
7681
"\n",
7782
"\n",
83+
"\n",
7884
"\u001b[B\u001b[B \u001b[B \n",
7985
"\n",
8086
"\n",
@@ -92,6 +98,7 @@
9298
"\n",
9399
"\n",
94100
"\n",
101+
"\n",
95102
"n\n",
96103
"\n",
97104
"\n",
@@ -107,6 +114,7 @@
107114
"\n",
108115
"\n",
109116
"\n",
117+
"\n",
110118
"n\n",
111119
"\n",
112120
"\n"
@@ -122,6 +130,7 @@
122130
"\n",
123131
"\n",
124132
"\n",
133+
"\n",
125134
"\u001b[B\n",
126135
"\n"
127136
]

‎tests/scaffold.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,14 @@ function generate (key, build) {
2626
.when(/Application Version/g).respond(build[2])
2727
.when(/Project description/g).respond(build[3])
2828
.when(/Scss/g).respond(build[4])
29-
.when(/plugins/g).respond(build[5])
30-
.when(/ESLint/g).respond(build[6])
31-
.when(/config/g).respond(build[7])
32-
.when(/unit/g).respond(build[8])
33-
.when(/end-to-end/g).respond(build[9])
34-
.when(/build tool/g).respond(build[10])
35-
.when(/author/g).respond(build[11])
29+
.when(/Less/g).respond(build[5])
30+
.when(/plugins/g).respond(build[6])
31+
.when(/ESLint/g).respond(build[7])
32+
.when(/config/g).respond(build[8])
33+
.when(/unit/g).respond(build[9])
34+
.when(/end-to-end/g).respond(build[10])
35+
.when(/build tool/g).respond(build[11])
36+
.when(/author/g).respond(build[12])
3637
.on('error', err => {
3738
console.log(err.message)
3839
})

0 commit comments

Comments
 (0)