使用webpack查看和编译没有js导入的sass

想知道是否有任何方法可以监视多个scss文件并将其编译为一个css文件，而不必在js文件中导入scss文件？

您可以将webpack入口点配置为一个scss文件，然后不必在JavaScript中进行任何导入

一个非常简单的网页包配置，如下面所示，应该可以工作：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './scss/app.scss',
  module: {
    rules: [
      // Extracts the compiled CSS from the SASS files defined in the entry
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          [
            'css-loader',
            'sass-loader'
          ]
        ),
      }
    ],
  },
  plugins: [
    // Where the compiled SASS is saved to
    new ExtractTextPlugin({
      filename: 'app.css',
      allChunks: true,
    })
  ],
  devServer: {
    host: '0.0.0.0',
  }
};

此设置将监视SCSS文件的更改，您可以手动重新加载页面以查看更改

---

我把一个小的示例项目放在一起演示：

我知道这很晚了，但有一种方法可以使用SCS并将其自动转换为CSS文件（程序读取）！它被称为Chokidar，它还监视SCS中的任何更改，并将自动刷新您的页面和更新您的更改

---

但是，当您使用此方法时，请确保webpack不在您的package.json中，它会发生冲突。

否，使用webpack无法做到这一点。webpack的整个概念都围绕着依赖关系图展开。