Question

我一直在努力让我的自定义webpack配置工作。生产工作很好，但开发虽然我认为它转换CSS，但不包括在文档中。这是我的开发配置，我认为没有任何相关的共同和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，即使他们没有＆＃39;有css加载器，它有效，我的没有。

vue / webpack不会将CSS注入html

1 个答案: