Question

想知道是否有办法观察多个scss文件并将其编译为一个css文件而无需在js文件中导入scss文件？

Answer 1

您可以将webpack入口点本身配置为SCSS文件，然后就不必在JavaScript中进行任何导入。

一个非常简单的webpack配置，如下所示即可：

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文件中的更改，您可以手动重新加载页面以查看更改。

我整理了一个小示例项目来演示：https://github.com/madebydavid/watch-and-compile-scss

Answer 2

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

https://dev.to/koheishingaihq/react-with-sass-11e

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

使用webpack监视和编译没有js导入的sass

2 个答案: