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

【问题标题】：watch and compile sass without js import using webpack使用 webpack 在没有 js 导入的情况下观看和编译 sass
【发布时间】：2018-11-21 18:29:33
【问题描述】：

想知道是否有任何方法可以查看多个 scss 文件并将它们编译为一个 css 文件而无需在 js 文件中导入 scss 文件？

【问题讨论】：

不，没有办法用 webpack 做到这一点。 webpack 的整个概念都围绕着一个依赖图。

标签： webpack sass

【解决方案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

【讨论】：