vue / webpack不会将CSS注入html-Java 学习之路

我一直在尝试让我的自定义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'] 但是都不起作用 . 我收到了编译错误或只是一个没有任何样式的页面 .

有任何想法吗？

1 回答

0

我有点好奇发生了什么以及为什么模板如 webpack 和 webpack simple ，即使他们不是't have css loaders, it works and mine didn' t .

回复于 2024-06-02T17:37:14+08:00

vue / webpack不会将CSS注入html

1 回答

相关问题