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

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions meta.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
105 changes: 68 additions & 37 deletions template/.electron-vue/webpack.renderer.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand All @@ -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'
Expand All @@ -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',
Expand Down Expand Up @@ -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(),
Expand All @@ -134,7 +165,7 @@ let rendererConfig = {
removeAttributeQuotes: true,
removeComments: true
},
nodeModules: process.env.NODE_ENV !== 'production'
nodeModules: !isProd
? path.resolve(__dirname, '../node_modules')
: false
}),
Expand All @@ -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, '\\\\')}"`
Expand All @@ -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(
Expand Down
95 changes: 63 additions & 32 deletions template/.electron-vue/webpack.web.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,44 +11,75 @@ 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}}

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'
Expand Down Expand Up @@ -131,7 +162,7 @@ let webConfig = {
/**
* Adjust webConfig for production settings
*/
if (process.env.NODE_ENV === 'production') {
if (isProd) {
webConfig.devtool = ''

webConfig.plugins.push(
Expand Down
4 changes: 4 additions & 0 deletions template/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 9 additions & 0 deletions tests/builds.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"\n",
"\n",
"\n",
"\n",
"\n"
],
"eslint-airbnb": [
Expand All @@ -21,6 +22,7 @@
"\n",
"\n",
"\n",
"\n",
"\u001b[B\n",
"\n",
"\n",
Expand All @@ -35,6 +37,7 @@
"\n",
"\n",
"\n",
"\n",
"\u001b[B\u001b[B\n",
"\n",
"\n",
Expand All @@ -47,6 +50,7 @@
"\n",
"\n",
"\n",
"\n",
"\u001b[B\u001b[B \n",
"\n",
"\n",
Expand All @@ -61,6 +65,7 @@
"\n",
"\n",
"\n",
"\n",
"\u001b[B\u001b[B\u001b[B \n",
"\n",
"\n",
Expand All @@ -75,6 +80,7 @@
"\n",
"\n",
"\n",
"\n",
"\u001b[B\u001b[B \u001b[B \n",
"\n",
"\n",
Expand All @@ -92,6 +98,7 @@
"\n",
"\n",
"\n",
"\n",
"n\n",
"\n",
"\n",
Expand All @@ -107,6 +114,7 @@
"\n",
"\n",
"\n",
"\n",
"n\n",
"\n",
"\n"
Expand All @@ -122,6 +130,7 @@
"\n",
"\n",
"\n",
"\n",
"\u001b[B\n",
"\n"
]
Expand Down
15 changes: 8 additions & 7 deletions tests/scaffold.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
Expand Down