Skip to content

Commit 9225de7

Browse files
xiaoiverxiaoiver
committed
fix: empty <style> bug
1 parent 98dd663 commit 9225de7

34 files changed

+10063
-120
lines changed

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
1. 在 Vue 单文件中自动引入变量文件
55
2. 选用了一个 UI 框架并使用了框架提供的主题解决方案，在组件中想使用这些主题变量，但又不想使用框架指定的预处理器
66

7+
下面让我们分别看下这两个问题。
8+
79
## 问题1：在 Vue 单文件中引入变量文件
810

911
通常我们的项目中包含一个定义了常用变量的文件，以开发选择的预处理器格式存在。
@@ -173,6 +175,10 @@ npm install vue-style-variables-loader --save-dev
173175
* `variablesFiles` 变量文件路径，Array 类型。指定主题变量文件。
174176
* `importStatements` import 语句，Array 类型。需要插入`.vue`文件`<style>`块头部的`@import`语句。在这里可以引入其他项目中使用的变量文件，要注意 loader 不会对这些文件做任何解析工作，只是简单的添加而已。
175177

178+
### 参数注意事项
179+
180+
使用`variablesFiles`时，传入的变量文件只允许包含定义变量语法。诸如 mixin，`@import`语句等都不能使用。
181+
176182
使用`importStatements`有两点需要注意：
177183
1. 由于 css-loader 中认为`@import`路径是相对当前路径，所以需要加上`~`前缀使 webpack alias 生效。例如上面使用示例中：`'@import "~@/styles/other-variables.less";'`。[相关ISSUE](https://github.com/webpack-contrib/css-loader/issues/12)。
178184
2. 需要加上预处理器后缀名，原因是 loader 需要知道`@import`语句中文件的后缀，才能正确插入对应的`<style>`块中。例如`'@import "~@/styles/other-variables.less";'`就不会插入`<style lang="styl">`中。

‎examples/keen-ui/src/Component.vue

+10-24
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,23 @@
11
<template>
22
<div class="component-wrapper">
3-
xxx
3+
<ui-button color="primary">Primary button</ui-button>
4+
<ui-button color="accent">Accent button</ui-button>
45
</div>
56
</template>
67

78
<script>
9+
import 'keen-ui/src/bootstrap';
10+
import UiButton from 'keen-ui/src/UiButton.vue';
11+
812
export default {
9-
name: 'component'
13+
name: 'component',
14+
components: {
15+
UiButton
16+
}
1017
};
1118
</script>
1219

1320
<style lang="styl">
1421
.stylus-selector
15-
color: $theme.primary
16-
height: $height
17-
</style>
18-
19-
<style lang="less">
20-
.less-selector {
21-
color: @theme-primary;
22-
height: @height;
23-
}
22+
color: $brand-primary-color
2423
</style>
25-
26-
<style lang="scss">
27-
.scss-selector {
28-
color: $theme-primary;
29-
height: $height;
30-
}
31-
</style>
32-
33-
<style lang="sass">
34-
.sass-selector
35-
color: $theme-primary
36-
height: $height
37-
</style>

‎examples/keen-ui/src/entry.js

-8
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,8 @@
44
*/
55

66
import Vue from 'vue';
7-
import { UiAlert, UiButton } from 'keen-ui';
87
import Component from './Component.vue';
98

10-
new Vue({
11-
components: {
12-
UiAlert,
13-
UiButton
14-
}
15-
});
16-
179
new Vue({
1810
el: '#app',
1911
components: {

‎examples/keen-ui/src/styles/variables.scss

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
$brand-primary-color: #673AB7;
2+
$brand-accent-color: #FF4081;

‎examples/keen-ui/webpack.base.conf.js

+25-9
Original file line numberDiff line numberDiff line change
@@ -34,30 +34,46 @@ module.exports = {
3434
{
3535
test: /\.vue$/,
3636
use: [
37-
{
38-
loader: 'vue-loader',
39-
options: vueLoaderConfig
40-
},
4137
{
4238
loader: 'vue-style-variables-loader',
4339
options: {
44-
variablesFiles: [resolve('./src/styles/variables.styl')],
45-
imports: []
40+
variablesFiles: [
41+
resolve('./src/styles/variables.scss')
42+
]
4643
}
4744
}
4845
],
49-
include: [resolve('src')]
46+
include: [resolve('src')],
47+
enforce: 'pre'
5048
},
5149
{
5250
test: /\.vue$/,
5351
use: [
5452
{
5553
loader: 'vue-loader',
5654
options: vueLoaderConfig
57-
}
55+
},
56+
// {
57+
// loader: 'vue-style-variables-loader',
58+
// options: {
59+
// variablesFiles: [
60+
// resolve('./src/styles/variables.scss')
61+
// ]
62+
// }
63+
// }
5864
],
59-
exclude: [resolve('src')]
65+
// include: [resolve('src')]
6066
},
67+
// {
68+
// test: /\.vue$/,
69+
// use: [
70+
// {
71+
// loader: 'vue-loader',
72+
// options: vueLoaderConfig
73+
// }
74+
// ],
75+
// exclude: [resolve('src')]
76+
// },
6177
{
6278
test: /\.js$/,
6379
loader: 'babel-loader',

‎examples/keen-ui/webpack.config.js

+10
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
'use strict';
99

10+
const webpack = require('webpack');
1011
const path = require('path');
1112
const utils = require('./utils');
1213
const merge = require('webpack-merge');
@@ -27,6 +28,15 @@ let webpackConfig = merge(baseWebpackConfig, {
2728
},
2829
devtool: false,
2930
plugins: [
31+
new webpack.LoaderOptionsPlugin({
32+
options: {
33+
sassLoader: {
34+
data: '@import "src/styles/variables.scss";',
35+
includePaths: 'src/styles'
36+
},
37+
context: path.resolve(__dirname)
38+
}
39+
}),
3040

3141
new ExtractTextPlugin({
3242
filename: utils.assetsPath('css/[name].css')

‎examples/simple/src/Component.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,4 @@ export default {
3535
.sass-selector
3636
color: $theme-primary
3737
height: $height
38-
</style>
38+
</style>

‎examples/simple/src/styles/mixins.less

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.mixin() {
2+
@width: 100%;
3+
@height: 200px;
4+
}

‎examples/simple/webpack.base.conf.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@ module.exports = {
4545
resolve('./src/styles/variables.styl')
4646
],
4747
importStatements: [
48-
'@import "~@/styles/other-variables.less";'
48+
'@import "~@/styles/other-variables.less";',
49+
'@import "~@/styles/mixins.less";'
4950
]
5051
}
5152
}

‎examples/vuetify/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="zh_CN">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>title</title>
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<% for (var jsFilePath of htmlWebpackPlugin.files.js) { %>
9+
<link rel="preload" href="<%= jsFilePath %>" as="script">
10+
<% } %>
11+
<% for (var cssFilePath of htmlWebpackPlugin.files.css) { %>
12+
<link rel="preload" href="<%= cssFilePath %>" as="style">
13+
<% } %>
14+
</head>
15+
<body>
16+
<div id="app"></div>
17+
<!-- built files will be auto injected -->
18+
</body>
19+
</html>

‎examples/vuetify/src/App.vue

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<v-app>
3+
<v-btn flat>Normal</v-btn>
4+
<v-btn color="primary" dark>Primary</v-btn>
5+
</v-app>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name: 'component'
11+
};
12+
</script>
13+
14+
<style lang="styl">
15+
.stylus-selector
16+
color: $theme.primary
17+
background: $colors.red.lighten-1
18+
</style>
19+
20+
<style lang="less">
21+
.less-selector {
22+
color: @theme-primary;
23+
background: @colors-red-lighten-1;
24+
}
25+
.less-selector2 {
26+
color: @less-color;
27+
}
28+
</style>
29+
30+
<style lang="scss">
31+
.scss-selector {
32+
color: $theme-primary;
33+
background: $colors-red-lighten-1;
34+
}
35+
</style>
36+
37+
<style lang="sass">
38+
.sass-selector
39+
color: $theme-primary
40+
background: $colors-red-lighten-1
41+
</style>

‎examples/vuetify/src/entry.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* @file keen-ui entry
3+
* @author panyuqi <[email protected]>
4+
*/
5+
6+
import Vue from 'vue';
7+
import App from './App.vue';
8+
import {
9+
Vuetify,
10+
VApp,
11+
VBtn
12+
} from 'vuetify';
13+
14+
import '@/styles/global.styl';
15+
16+
Vue.use(Vuetify, {
17+
components: {
18+
VApp,
19+
VBtn
20+
}
21+
});
22+
23+
new Vue({
24+
el: '#app',
25+
components: {
26+
App
27+
},
28+
template: '<App />'
29+
});

‎examples/vuetify/src/styles/global.styl

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import '~vuetify/src/stylus/settings/_colors'
2+
3+
@import './theme'
4+
5+
@import '~vuetify/src/stylus/main'

‎examples/vuetify/src/styles/other-variables.less

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@less-color: #aaaaaa;

‎examples/vuetify/src/styles/theme.styl

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
$theme := {
2+
primary: $colors.red.lighten-1
3+
accent: white
4+
secondary: white
5+
info: white
6+
warning: white
7+
error: white
8+
success: white
9+
}

‎examples/vuetify/utils.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/**
2+
* @file utils
3+
* @author panyuqi ([email protected])
4+
*/
5+
6+
'use strict';
7+
8+
const path = require('path');
9+
const ExtractTextPlugin = require('extract-text-webpack-plugin');
10+
11+
exports.assetsPath = function (newPath) {
12+
return path.posix.join('static', newPath);
13+
};
14+
15+
exports.cssLoaders = function (options) {
16+
options = options || {};
17+
18+
let cssLoader = {
19+
loader: 'css-loader',
20+
options: {
21+
minimize: process.env.NODE_ENV === 'production',
22+
sourceMap: options.sourceMap
23+
}
24+
};
25+
26+
// generate loader string to be used with extract text plugin
27+
function generateLoaders(loader, loaderOptions) {
28+
let loaders = [cssLoader];
29+
if (loader) {
30+
loaders.push({
31+
loader: loader + '-loader',
32+
options: Object.assign({}, loaderOptions, {
33+
sourceMap: options.sourceMap
34+
})
35+
});
36+
}
37+
38+
// Extract CSS when that option is specified
39+
// (which is the case during production build)
40+
if (options.extract) {
41+
return ExtractTextPlugin.extract({
42+
use: loaders,
43+
fallback: 'vue-style-loader'
44+
});
45+
}
46+
47+
return ['vue-style-loader'].concat(loaders);
48+
}
49+
50+
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
51+
return {
52+
css: generateLoaders(),
53+
postcss: generateLoaders(),
54+
less: generateLoaders('less'),
55+
sass: generateLoaders('sass', {indentedSyntax: true}),
56+
scss: generateLoaders('sass'),
57+
stylus: generateLoaders('stylus'),
58+
styl: generateLoaders('stylus')
59+
};
60+
};
61+
62+
// Generate loaders for standalone style files (outside of .vue)
63+
exports.styleLoaders = function (options) {
64+
let output = [];
65+
let loaders = exports.cssLoaders(options);
66+
67+
Object.keys(loaders).forEach(function (extension) {
68+
output.push({
69+
test: new RegExp('\\.' + extension + '$'),
70+
use: loaders[extension]
71+
});
72+
});
73+
return output;
74+
};

‎examples/vuetify/vue-loader.conf.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/**
2+
* @file vue-loader conf
3+
* @author panyuqi ([email protected])
4+
*/
5+
6+
'use strict';
7+
8+
const utils = require('./utils');
9+
10+
module.exports = {
11+
loaders: utils.cssLoaders({
12+
sourceMap: false,
13+
extract: true
14+
})
15+
};

0 commit comments

Comments
 (0)