Webpack sass-loader无法生成CSS文件

Question

我无法弄清如何使用webpack sass-loader渲染css文件。

这是我的webpackconfig.js的样子：

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html"
  },


  output: {
    filename: "app.js",
    path: __dirname + "/dist"
  },


  module: {
    loaders: [
      //JAVASCRIPT
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["babel-loader"],
      },

      //Index HMTML
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
      //Hotloader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel-loader"],
      },

      // SASS
      {
        test: /\.scss$/,
        loader: 'style!css!sass'
      }

    ],
  }

}

正如你所看到的，我正在使用文档中指定的sass-loader模块加载器。

  {
    test: /\.scss$/,
    loader: 'style!css!sass'
  }

我的根目录看起来像这样：

Project Root:
  app:
    style.scss
  dist:
   ?????? WTF is my css file??
  webpack.config.js

我可以让其他所有东西工作，例如html和jsx babble加载器。 我只需在命令行中输入webpack，就会发生事情。

我在sass加载器方面做错了什么。 是什么问题？ 请帮帮我。

- PAT-O-MATION

Answer 1

你正在使用 style-loader，它默认会将你的 CSS 嵌入到 Javascript 中，并在运行时注入它。

如果你想要真正的 CSS 文件而不是嵌入在 Javascript 中的 CSS，你应该使用 ExtractTextPlugin。

一个基本的配置如下:

1. 在 Webpack 配置文件顶部添加 var ExtractTextPlugin = require('extract-text-webpack-plugin');

2. 在 Webpack 配置中添加以下内容:

   plugins: [
       new ExtractTextPlugin('[name].css'),
   ]
   

3. 将您的SASS加载程序配置更改为以下内容：

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(
        'style-loader', // backup loader when not building .css file
        'css-loader!sass-loader' // loaders to preprocess CSS
    )
}

这将提取捆绑包中可以找到的所有CSS并生成单独的文件。名称将基于入口点名称，这将导致在您的情况下为javascript.css（从配置的入口部分）。插件使用ExtractTextPlugin.extract-loader在代码中查找CSS并将其放入单独的文件中。您给它的第一个参数是它应该回退到的加载程序，例如如果它在异步模块中遇到文件。通常，这几乎总是style-loader。第二个参数告诉插件要使用哪些加载器来处理CSS，在这种情况下为css-loader和sass-loader，但通常也会使用像postcss-loader之类的东西。有关使用Webpack构建CSS的更多信息，请访问此处： https://webpack.github.io/docs/stylesheets.html#separate-css-bundle。

- Ambroos

---

你拯救了我头发的很大一部分 :) - Balázs Édes

以上是一种有效的方法，但我想补充一点，即使我使用了以上的方法，我也没有注意到：在你的模块（JS文件）中添加 require("./stylesheet.css") 之前，Webpack不会加载你的样式表。这可能很显然（并在文档中提到），但对于Webpack初学者来说可能不是那么明显。 - piotr.d

@piotr.d 或使用 html-webpack-plugin. :) - Hein Haraldson Berg

@piotr.d 很有趣，当我尝试这样做时，出现了一个错误：ERROR in ./scripts/app.js Module not found: Error: Cannot resolve 'file' or 'directory' ./app.css ... - roberto tomás

extract-text-webpack-plugin现在要求您明确给出加载器的名称。例如：extract(css-loader|sass-loader)。 - Isaac Pak

Answer 2

如果您使用TypeScript并遇到类似的问题，我发现'scss'文件应该在Webpack启动的index文件中导入。

在index.ts中导入，而不是在内部模块中导入。

- dror