Vue.js + Webpack多种样式TAS输出 [英] Vue.js + Webpack multiple style tas output

问题描述

我有几个以单页组件格式编写的vue.js组件.

I have several vue.js components, written in single page component format.

对于每个.vue文件，我针对该页面的书面内容较少.

For each .vue file, I have less written specific for that page.

捆绑后，我有几个样式标签，它们填充了全局样式空间.因此，我的某些课程在不同的页面上重叠.

After bundling, I have several style tags, which populate the global style space. Thus, some of my classes are overlapping on different pages.

这是vue.js和webpack的预期功能吗?

Is this the intended functionality with vue.js and webpack?

推荐答案

这是 vue-加载程序(这是vue-webpack模板中的主要插件).

This is the default behaviour for vue-loader (which is the main plugin in the vue-webpack template).

但是，如果需要，您可以将所有CSS提取到一个文件中:

However, if you want to you can extract all CSS into one file:

npm install extract-text-webpack-plugin --save-dev

---

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
    ]
  },
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract("css"),
      // you can also include <style lang="less"> or other langauges
      less: ExtractTextPlugin.extract("css!less")
    }
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

查看有关提取的 vue-loader 的文档

这篇关于Vue.js + Webpack多种样式TAS输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！