开发者社区> 问答> 正文

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组件:

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

展开
收起
杨冬芳 2016-06-13 14:51:13 7457 0
1 条回答
写回答
取消 提交回答
  • IT从业

    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,
        }),
      ],
    };
    2019-07-17 19:36:02
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
基于webpack和npm的前端组件化实践 立即下载
Vue.js 在前端服务化上的探索与实践 立即下载
利用编译将 Vue 组件转成 React 组件 立即下载