Vue.js + Webpack 多样式 tas 输出

Posted 2023-02-22

【中文标题】Vue.js + Webpack 多样式 tas 输出

【英文标题】：Vue.js + Webpack multiple style tas output

【发布时间】：2017-02-21 16:22:31

【问题描述】：

我有几个 vue.js 组件，写成单页组件格式。

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

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

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

【参考方案1】：

这是vue-loader（vue-webpack 模板中的主要插件）的默认行为。

但是，如果您愿意，可以将所有 CSS 提取到一个文件中：

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 关于提取的文档。

【讨论】：

感谢您的回答。我意识到我们已经过去了 1.5 年。 Webpack 4 已经发布，它不允许像你一样在根导出中使用 vue 对象。这现在如何运作？

现在应该使用 vue-style-loader，看这里：vue-loader.vuejs.org/guide/pre-processors.html