vue获取css内容进行替换_webpack如何提取vue组件的css到独立文件中 -问答-阿里云开发者社区-阿里云...

现在是单独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组件:

@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;

}

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') 这是外边的内容

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,

},

},

}