vue/webpack 不会将 css 注入 html

Question

我一直在尝试让我的自定义 webpack 配置正常工作。生产效果很好，但开发虽然我认为它转译了 CSS，但并未将其包含在文档中。这是我的开发配置，我认为在通用和产品设置中没有任何相关内容，所以我将跳过它们。

我也在尝试通过 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'] 的所有可能组合，但都没有作品。我收到编译错误或只是一个没有任何样式的页面。

有什么想法吗？

Answer 1

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

vue/webpack 不会将 css 注入 html

vue/webpack doesn't inject css into the html

webpack

vue.js

webpack-dev-server

vue-loader