webpack3提取vue css,webpack,css_webpack如何提取vue组件的css到独立文件中，webpack,css,scss - phpStudy...

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,

},

},

}

相关阅读:

Django使用sqlite创建的数据库，将数据库文件删除之后不能再创建

git分支管理

ckplayer这个播放器 可以一边加载一边播放吗

Webstorm不支持React 0.14。

求一个angularJS写法

rz命令用不了？

如何在页面中所有a标签中的url追加?key=value

sqlchemy中日期格式化的问题

编写后端代码实现文档的工具

java ExecutorService Callable 任务停止和状态

关于angular的js动画执行问题，菜鸟求教。

android项目能不能共用所依赖的library工程的androidmanifest.xml文件

geotiff的数据组织方向

请教关于轮播图问题。

移动端如何解决position：fixed失效的问题？

js正则表达式匹配

ios中下载远程html等文件，然后再WEBVIEW中打开浏览。

php组合生成一个特殊数组的问题

ubuntu下配置cgroup出现如下错误

不懂英文如何学习编程呢?