webpack 开发服务器未注入 css

Question

当我查看来自运行调用 webpack-dev-server IMO 的脚本的标准输出时，它正在处理/发出 scss | css好的。但是，当您转到 devtools 并请求“localhost: 8080”时，不包括 css（由开发服务器注入）。就好像 css 不存在一样。

环境：package.json

"webpack": "^4.38.0",
"webpack-cli": "^3.3.8",
"sass-loader": "^7.1.0", 
"mini-css-extract-plugin": "^0.4.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"css-loader": "^1.0.0",
"del": "^2.2.2",
"dialog-polyfill": "^0.5.6",
"ejs": "^2.5.7",
"ejs-loader": "^0.3.1",

  "devDependencies": {
    "eslint": "^5.12.0",
    "eslint-loader": "^2.1.1",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-dev-server": "^3.7.2"

包json脚本：

"dev": "GOOG_ATION_CREDE=app/workbox-demos-4dee.json node app/server.js",

server.js 使用 express + webpack 中间件

const app = express();
const config = require('../webpack.config.dev.js');
const compiler = webpack(config);
app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath,
  })

webpack.config.dev.js

  output: {

    filename: '[name].bundle.js',
    publicPath: '/'

  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './',
  },
  module: {
    rules: [
      { test: /\.js$/,
        exclude: [
          path.resolve(__dirname, "node_modules"),
          path.resolve(__dirname, "app/scripts/cacheWorker.js")
        ],
        use: {
          loader: 'babel-loader',
        }
      },
      {test: /\.html$/,
e: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]},
      { test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
            options: {
              includePaths: ['./node_modules']
            }
          }
        ]
      },
  
    ]
  },
  plugins: [

  new MiniCssExtractPlugin({
  filename: "bundle.css",
  chunkFilename: "[id].css"
  }),

css 从 express.app

导入

  import  "../styles/main.css";
  import {MDCMenu} from '@material/menu';

  import "../styles/camer.css";

来自 $npm 运行 dev

的标准输出

app running http://localhost:8080 /home/rob/src/web-spch-v2/app
Hash: 771fef3df3589e3ab505
Version: webpack 4.46.0
Time: 3719ms
Built at: 01/19/2021 5:21:53 PM
                                             Asset       Size  Chunks             Chunk Names
              7719fdcabdc03146e2da973edaac2425.png   17.8 KiB          [emitted]  
                              apple-touch-icon.png   9.79 KiB          [emitted]  
                                        bundle.css    208 KiB    main  [emitted]  main
              ec2f90c63e57675db0e442e5d5f5f447.png  813 bytes          [emitted]    
                                    main.bundle.js    1.2 MiB    main  [emitted]  main
                                 manifest.pwa.json    1.1 KiB          [emitted]  
                            scripts/.eslintrc.json  338 bytes          [emitted]  
                                   scripts/app2.js     21 KiB          [emitted]  
                            scripts/cacheWorker.js   1.56 KiB          [emitted]  
                                 scripts/config.js    3.7 KiB          [emitted]    
                                   scripts/main.js   16.1 KiB          [emitted]   
                                 service-worker.js   9.08 KiB          [emitted]  
                             service-worker.js.map   10.9 KiB          [emitted]  
                                  styles/camer.css   12.4 KiB          [emitted]  
                        styles/dialog-polyfill.css  636 bytes          [emitted]  
                                  styles/list.scss   3.05 KiB          [emitted]  
                                   styles/main.css   5.31 KiB          [emitted]  
                      styles/media-player-icon.jpg   11.1 KiB          [emitted]  
                           styles/worker/create.js   9.24 KiB          [emitted]  
                              styles/zuck_hosp.png   17.8 KiB          [emitted]  
                           styles/zuck_hosp_ol.png   17.8 KiB          [emitted]  
                               var/browserTyp.html   3.41 KiB          [emitted]  
                     var/scripts/Mp3LameEncoder.js   1.27 MiB          [emitted]  
                 var/scripts/Mp3LameEncoder.min.js    283 KiB          [emitted]  
             var/scripts/Mp3LameEncoder.min.js.mem   19.2 KiB          [emitted]  
                      var/scripts/mp3LameWorker.js  909 bytes          [emitted]  
                         var/scripts/recorderGR.js   3.91 KiB          [emitted]  
                              var/scripts/voice.js   26.2 KiB          [emitted]  
                                    var/voice.html   3.46 KiB          [emitted]  
                                   views/index.ejs   8.93 KiB          [emitted]  
                                   views/inner.ejs  160 bytes          [emitted]  
                                   views/logon.ejs    0 bytes          [emitted]  
                                    views/mail.ejs      3 KiB          [emitted]  
                              views/mediaItems.ejs   3.12 KiB          [emitted]  
                               views/mediaplay.ejs   2.26 KiB          [emitted]  
                                views/tchannel.ejs    1.1 KiB          [emitted]  
                                    views/test.ejs   1.77 KiB          [emitted]  
                             views/userchannel.ejs   1.56 KiB          [emitted]  
                          views/usermediaitems.ejs   2.33 KiB          [emitted]  
                                views/userplay.ejs   2.27 KiB          [emitted]  
                               workbox-3b8b670f.js   67.7 KiB          [emitted]  
                           workbox-3b8b670f.js.map    116 KiB          [emitted]  
                   workbox-demos-4d4e77aa9fee.json   2.31 KiB          [emitted]  
Entrypoint main = bundle.css main.bundle.js

Answer 1

您没有在 css 加载器上方包含 style loader：

npm install --save-dev style-loader

然后在 webpack.config.js:

      {
        loader: "style-loader",
      },
      ,{
        loader: "css-loader",
      },
      {
        loader: "sass-loader",
        options: {
          includePaths: ['./node_modules']
        }
      }

webpack 开发服务器未注入 css

webpack dev server not injecting css

javascript

css

node.js

express

webpack-dev-server