webpack - 使用 webpack 在没有 js 导入的情况下观看和编译 sass

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