vue/webpack不会将css注入到html中

Question

我一直在尝试让我的自定义webpack配置正常工作。Production运行得很好，但是dev虽然我认为它转换了CSS，但并没有把它包含在文档中。这是我的dev配置，我不认为有任何相关的共同和prod设置，所以我将跳过它们。

我也在试着通过postcss来传递它。

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // something here (I suppose)
          },
         // extractCSS: true
        }
      },
    ],
  },
  devtool: '#eval-source-map',
  devServer: {
    historyApiFallback: true,
    hot: true,
    noInfo: true,
    overlay: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
      inject: true,
    }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"'
      }
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
})

我的postCSS配置以防万一：

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "autoprefixer": {}
    }
}

我的prod配置正确地提取CSS -唯一的区别是vue-loader选项中的extractCSS: true选项(显然还有提取CSS插件)。

我怀疑我没有以任何方式注入文件，我已经尝试在vue-loader中设置自定义加载器，我发誓我已经尝试了所有可能的['vue-style-loader', 'postcss-loader', 'css-loader', 'style-loader']组合，但都不起作用。我得到了编译错误或者只是一个没有任何样式的页面。

有什么想法吗？

Answer 1

我已经开始尝试是否加载.vue文件之外的文件，所以我添加了样式和css加载器--这解决了这个问题。即使我已经安装了它们，vue可能是依赖于我的规则来加载它-而不是显式地在第三方加载程序上。如果有人想更深入地解释这种行为--请放心，我有点好奇，为什么像webpack和webpack simple这样的模板虽然没有css加载器，但它可以工作，而我的却没有。