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

【问题标题】：vue/webpack doesn't inject css into the htmlvue/webpack 不会将 css 注入到 html 中
【发布时间】：2018-07-28 10:17:31
【问题描述】：

我一直在尝试让我的自定义 webpack 配置正常工作。生产效果很好，但是开发人员虽然我认为它可以转换 CSS，但并未将其包含在文档中。这是我的开发配置，我认为在 common 和 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": {}
    }
}

我的产品配置正确地提取了 CSS - 唯一的区别基本上是 vue-loader 选项中的 extractCSS: true 选项（显然是提取 CSS 插件）。

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

有什么想法吗？

【问题讨论】：

标签： webpack vue.js webpack-dev-server vue-loader

【解决方案1】：

我已经开始试验 .vue 文件之外的文件是否会加载，所以我添加了样式和 css 加载器——这解决了这个问题。即使我已经安装了它们，vue 也可能依赖我的规则来加载它——而不是明确地在 3rd 方加载器上。如果有人想更深入地解释这种行为 - 请随意，我有点好奇发生了什么以及为什么模板如 webpack 和 webpack simple 即使他们没有 css 加载程序，它也可以工作并且我的没有。

【讨论】：