Question

我正在尝试为我的react项目设置一个非常基本的css配置。我正在使用webpack和样式加载器，如下所示：

// webpack.config.js

const {resolve} = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const port = process.env.PORT || 3000;

module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "bundle.[hash].js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }, {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, {
            loader: "css-loader",
            options: {
              modules: true,
              camelCase: true,
              sourceMap: true
            }
          }, {
            loader: "sass-loader",
            options: {
              sourceMap: true,
              precision: 8,
              data: "$ENV: " + "PRODUCTION" + ";"
            }
          }
        ]
      }
    ]
  },
  devServer: {
    host: 'localhost',
    port: port
  },
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: resolve("public", "index.html"),
      favicon: resolve("public", "favicon.ico")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })

  ]
};

我的问题是我的css文件中的更改没有反映在我的反应组件返回的html中。

所以，如果我有一个像：

这样的组件

import React from 'react'
require('../../styles/style.scss')

const App = () => (<div className="root">
  <div id='banner1' className='banner'>
    <h1>foo</h1>
    <h2>bar</h2>
  </div>
</div>)

export default App

...和scss文件一样：

#banner1 {
  height: 100vh;
  background: blue;
  width: 100%;
}
h1 {
  font-size: 30px;
  color: white;
}

...我的样式最初会显示，但是如果我刷新页面，服务器仍在运行时的任何更改都将被反映出来。它只会在我重新启动服务器时反映样式表中的更改。

我怀疑mini-css-extract-plugin软件包正在缩小css并将其打包成一个捆绑包，无论何时它发生变化，它都会在开发环境中看不到，并且它没有。得到重组。

如果我是对的，我的冲突是，这是我在教程中读取的无处不在的方式来设置你的webpack配置，并且在开发中没有提到这种副作用环境。是否有我应该为开发环境指定的备用配置？我有什么遗失的吗？

反映不反映样式更改

0 个答案: