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

Commit

Permalink
fix: when building, style.css can not extract out bug
Browse files Browse the repository at this point in the history
  • Loading branch information
yugasun committed Nov 15, 2018
1 parent 8fae476 commit 49a5b47
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 69 deletions.
5 changes: 5 additions & 0 deletions meta.js
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
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
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 = 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'
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
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

0 comments on commit 49a5b47

Please sign in to comment.