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

Commit 49a5b47

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

File tree

4 files changed

+140
-69
lines changed

4 files changed

+140
-69
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 = isProd
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",

0 commit comments

Comments
 (0)