Webpack 2 不会在 vue 文件中编译 css

Question

大家好，

我在为 vue 组件编译 css 时遇到问题。这是我的配置文件：https://gist.github.com/lavezzi1/27817a17cb4fa2a092e701089ecae0ec

我用 vue 做多页应用。一切正常，除了一件事：如果我有两页，如果它们都导入了模态 import Modal from 'components/modal.vue' 一切正常，但如果没有，则输出 .css 文件没有有 css 模态代码。我该如何解决？

我的 vue 组件如下所示：

<template>
...
</template>

<script>
...
</script>

<style lang="css">
   css here
</style>

感谢您的帮助！

Answer 1

Webpack 需要 vue-loader 来处理 Vue 组件。

Answer 2

您应该使用编译选项扩展您的 vue-loader css。

例如：

  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        css: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: condition
              }
            }
          ],
          fallback: 'vue-style-loader'
        })
      }
    }
  }

Webpack 2 不会在 vue 文件中编译 css

Webpack 2 doesn't compile css inside of vue files

css

webpack

vue.js

webpack-style-loader

vuejs2