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

解决方案

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,
    }),
  ],
};

这篇关于scss - webpack如何提取vue组件的css到独立文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！