现在是单独import进来的样式文件可以单独提取出来,而在vue组件中的样式还是跟js打包到一块儿的,要怎么才能把vue组件中的样式也单独提取出来放到一个外部的样式文件中呢?
完整配置信息,可以将Vue组件的CSS提取出来了,webpack.config.js:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './js/main.js',
output: {
path: __dirname,
filename: '../static/js/app.js',
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue',
},
{
test: /\.js$/,
loader: 'babel',
},
{
test: /\.(png|jpg)$/,
loader: 'url?limit=8192',
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
},
],
},
vue: {
loaders: {
sass: ExtractTextPlugin.extract('vue-style-loader', 'css-loader!sass-loader'),
},
},
plugins: [
new ExtractTextPlugin('../static/css/style.css', {
allChunks: true,
}),
],
};
vue组件:
<style lang='sass'>
@import "../../scss/_css3Module.scss";
@import "../../scss/_retinaLine.scss";
.help-title {
margin: 0;
}
.help-title,
.help-item {
display: block;
padding: 10px;
text-align: center;
background-color: #f1f1f1;
margin-bottom: 5px;
}
</style>
<template lang='jade'>
h1.help-title 常用Vue组件
a.help-item
Geo
a.help-item(@click='modalShowEvent(true, false)') 两按钮的弹框
a.help-item(@click='modalShowEvent(true, true)') 一个按钮的弹框
a.help-item(@click='modalShowEvent(true, false, "one")') 弹框确认事件1
a.help-item(@click='modalShowEvent(true, true, "two")') 弹框确认事件2
modal(v-show='modalToggle')
p(slot='content') 这是外边的内容
</template>
<script lang='babel'>
import Geo from './common/geolocation.vue';
import Modal from './common/modal.vue';
import { modalShowEvent } from '../store/actions/modal';
import { modalToggle, modalCancelBtn } from '../store/getters';
export default {
components: {
Geo,
Modal,
},
vuex: {
getters: {
modalToggle,
},
actions: {
modalShowEvent,
},
},
}
</script>
webpack.config.js里要使用如下套路:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './js/main.js',
output: {
path: __dirname,
filename: '../static/js/app.js',
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue',
},
{
test: /\.js$/,
loader: 'babel',
},
{
test: /\.(png|jpg)$/,
loader: 'url?limit=8192',
}
],
},
vue: {
loaders: {
css: ExtractTextPlugin.extract('vue-style-loader', 'css-loader', 'sass-loader')
}
},
plugins: [
new ExtractTextPlugin('../static/css/style.css', {
allChunks: true,
}),
],
};
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。