Webpack未拾取SCSS更改

Question

我正在使用webpack-dev-server与webpack一起提供webpack项目（并接受更改），将所有文件编译到dist文件夹中。

以下Webpack配置适用于：-将sass编译为js并使用它-在更改时将html文件复制到dist文件夹

const path = require('path');

module.exports = {
    stats: 'verbose',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index-webpack.bundle.js'
      },
    module: {
        rules: [
          {
            test: /\.s[ac]ss$/i,
            use: [
              // Creates `style` nodes from JS strings
              'style-loader',
              // Translates CSS into CommonJS
              'css-loader',
              // Compiles Sass to CSS
              'sass-loader',
            ],
          },
          {
            test: /\.(html)$/i,
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                },
              }
            ],
          },
        ],
      },
      watch: true,
      watchOptions: {
        ignored: ['files/**/*.js', 'node_modules']
      }
  };

Package.json文件：

"webpack-dev": "webpack -d --mode development",
"start:dev": "webpack-dev-server"

Index.js文件：

//Main webpack file
import './index.scss';
import myFunction from './navigation/navigation';
window.myFunction = myFunction;
import html from './index.html';

但是我发现奇怪的是，当我在index.html中更改某些内容时，它已被编译（因为dist文件夹中的html发生了更改...），但是在运行webpack -d --mode的终端中没有输出发展。为什么会这样？

还仅获取html和js的更改。当更改为scss时，我必须重新启动webpack-dev命令才能重新编译所有内容。有人可以帮我看一下scss文件吗？

Answer 1

您可以尝试更改：

test: /\.s[ac]ss$/i,

收件人：

test: /\.(sa|sc|c)ss$/,