NPM 监视 css 更改在 npm run start 上不起作用

Question

因此，在我的 npm run start 期间，它不会捕获对编译成 css 文件的 scss 文件的任何更改。当我运行 npm run build 时，scss 工作得很好，但它没有捕捉到任何 css 更改。我添加了 css 脚本，我也会跑到一边，但是，这也不起作用。大家对如何解决这个问题有任何想法吗？或者你们中的任何人都有一个可以使用 npm run start 捕获 scss 更改的有效 webpack 设置？

当我进行更改时，我实际上看到终端重新编译，所以我知道它被捕获了。这是一个反应应用程序仅供参考。这是我的 webpack 配置文件（在运行构建期间有效）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    devtool: 'inline-source-map',

    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "/static/cs/styles.css",
            chunkFilename: "styles.css"
        })


    ],

    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'static/js/bundle.js'
    },
    module: {

        rules: [

            {
                test: /\.s?css$/,
                use: [
                    "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            },

            {
                use: { loader: 'babel-loader' },
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: '',
                        },
                    }

                ]
            },


        ]
    },

    devServer: {

        contentBase: path.join(__dirname, 'build'),

    },


}

这是我的脚本

  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot ",
    "build": "webpack --mode production",
    "build-task:scss-compile": "node-sass-chokidar --source-map true src/scss/ -o dist/css",
    "build-task:autoprefixer": "postcss dist/css/*.css --use autoprefixer -d dist/css",
    "sass:build": "npm-run-all -p build-task:*",
    "sass:watch": "chokidar 'src/styles/*.scss' -c 'npm run sass:build'",
    "dev": "npm-run-all -p sass:*",
    "css": "node-sass src/styles/styles.scss -o dist",
    "css:watch": "npm run css && node-sass src/styles/styles.scss -wo dist"
  },

Answer 1

首先，将NODE_ENV=development 添加到您的启动脚本中：

{
//...
    "start": "NODE_ENV=development webpack-dev-server --mode development --open --hot ",
//...
}

请参阅 StackOverflow 上的 this answer 以了解有关节点环境变量的更多信息。

现在，在生产环境中，您希望从创建的包中提取 css 并将其放入单独的.css 文件中。在development 中，您只想内联注入它，这样您就可以获得热重载等好处。在您的情况下，您首先提取 css 并 然后 尝试注入它。这意味着style-loader 不再需要注入任何东西，因为所有样式都已被提取。

使用process.env.NODE_ENV 读取您所处的环境（读取npm 脚本中的NODE_ENV 值）。在此基础上，添加style-loader 或MiniCssExtractPlugin.loader。

        {
            test: /\.s?css$/,
            use: [
                process.env.NODE_ENV === development ?"style-loader": MiniCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
            ]
        },

如果您在生产环境中，请不要忘记仅将 MiniCssExtractPlugin 添加到您的插件数组中。一种方法是：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// Create a shortcut, returns true if you're NODE_ENV is set to development
const isDev = process.env.NODE_ENV === 'development';

// Let's wait with exporting, and first assign the config object to a variable:
const config = {
    // ...    
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: "./index.html"
        }),

    ],
    // ...    
    module: {
        rules: [
            {
                test: /\.s?css$/,
                use: [
                    isDev ? "style-loader" : MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            },
        // ...   

        ]
    },
    // ...   
}

// if NOT in development, push `MiniCssExtractPlugin` to plugin array
if (!isDev) {
    config.plugins.push(
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "/static/cs/styles.css",
            chunkFilename: "styles.css"
        })
    )
}

module.exports = config;

有更好的方法将开发配置与生产分开。许多文章——例如this one——解释了如何做到这一点。

Answer 2

在以管理员权限运行 react-script 命令后，这个问题为我解决了：

Linux：

sudo npm start

窗户：

右击cmd。然后，点击以管理员身份运行