webpack 重新加载样式而不刷新页面

Question

我使用 webpack 和 livereload 插件，但是当我更改样式时，页面刷新但我不想要它。

当我使用 gulp 时，我会更改样式中的任何内容并保存它，然后在不刷新页面的情况下重新加载 css。

为什么在 webpack 上不能像 gulp 那样工作？

代码如下

webpack.config.js

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const WebpackNotifierPlugin = require("webpack-notifier");
const webpack = require("webpack");
const LiveReloadPlugin = require("webpack-livereload-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
    entry: [
        "./resources/js/app.jsx",
        "./resources/scss/app.scss",
    ],
    devtool: "source-map",
    output: {
        path: path.resolve(__dirname, "public/assets"),
        filename: "js/app.js",
        publicPath: "/public/assets/"
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env", "react", 'stage-2']
                }
            }
        }, {
            test: /\.(scss)$/,
            loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader', "postcss-loader"])
        }]
    },
    resolve: {
        extensions: ["*", ".js", ".jsx"]
    },
    watch: true,
    plugins: [
        new CopyWebpackPlugin([{
            from: "node_modules/bootstrap/dist",
            to: "plugins/bootstrap"
        }, , {
            from: 'node_modules/font-awesome/css',
            to: 'plugins/font-awesome/css',
        }, {
            from: 'node_modules/font-awesome/fonts',
            to: 'plugins/font-awesome/fonts',
        }]),
        new WebpackNotifierPlugin({
            alwaysNotify: true
        }),
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new LiveReloadPlugin(),
        new ExtractTextPlugin({
            filename: 'css/app.css'
        }),
        new Dotenv({
            path: './.env',
            safe: true
        }),
        new webpack.EnvironmentPlugin(['NODE_ENV'])
    ],
    node: {
        fs: "empty"
    }
};

package.json

"scripts": {
    "start": "webpack-dev-server --history-api-fallback --progress --colors",
    "dev": "cross-env NODE_ENV=development webpack --progress --color",
    "prod": "cross-env NODE_ENV=production webpack -p --progress --color"
  },

我使用“npm run dev”命令。 问题出在哪里？

Answer 1

这样试试就行了。

{
   test: /\.(s*)css$/,
   loader: ExtractTextPlugin.extract(['style-loader', 'css-loader', "sass-loader"])
}

如果您共享 package.json 将有助于其他人解决问题。

Answer 2

ExtractTextPlugin 遗憾的是不支持热模块替换。

来自页面插件说明：

无需热更换模块

您需要做的是在生产中使用该插件。

rules: [
  ...
  {
    test: /\.scss$/,
    use: process.env.NODE_ENV === 'production' ?
      ExtractTextPlugin.extract([
        "css-loader", "sass-loader", "postcss-loader"
      ]) : [
        { loader: "style-loader" },
        { loader: "css-loader" },
        { loader: "sass-loader" },
        { loader: "postcss-loader" }
      ]
  }
]