NPM监视css更改无法在npm run start上运行

Question

因此，在我的npm运行启动期间，它没有捕获到编译成css文件的scss文件的任何更改。当我运行npm run build时，scss工作得很好，但它没有捕获任何css更改。我已经添加了css脚本，我也会跑到一边，然而，这也不起作用。你们都知道如何解决这个问题吗？或者你有没有一个工作webpack设置，用npm run start捕获scss更改？

我实际上看到终端在进行更改时重新编译，所以我知道它被抓住了。这是一个反应应用程序。这是我的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--解释了如何做到这一点。