webpack sass-loader 未生成 css 文件答案

【问题标题】：webpack sass-loader not generating a css filewebpack sass-loader 未生成 css 文件
【发布时间】：2015-11-19 14:01:26
【问题描述】：

我不知道如何使用 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 loader。我只需在命令行中输入 webpack，事情就会发生。

我的 sass 加载程序有问题。它是什么？请帮忙。

【问题讨论】：

标签： sass loader webpack

【解决方案1】：

您正在使用样式加载器，默认情况下，它会将您的 CSS 嵌入到 Javascript 中并在运行时注入。

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

基本配置是：

将 var ExtractTextPlugin = require('extract-text-webpack-plugin'); 添加到 Webpack 配置文件的顶部。

将以下内容添加到您的 Webpack 配置中：

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

将您的 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

【讨论】：

你拯救了我的大部分头发 :)
以上是一种有效的方法，但我会添加一个我错过的注释，即使我使用了上述方式：webpack 在你添加之前不会选择你的样式 i> require("./stylesheet.css") 到你的模块（JS 文件）。这可能很明显（并且在文档中提到过），但对于 Webpack 初学者来说并非如此。
@piotr.d 或者使用 html-webpack-plugin。 :)
@piotr.d 很有趣，当我尝试这样做时出现错误：ERROR in ./scripts/app.jsModule not found: Error: Cannot resolve 'file' or 'directory' ./app.css ...
extract extract-text-webpack-plugin 现在要求您明确给出加载程序的名称。 IE。 extract(css-loader|sass-loader)

【解决方案2】：

使用 TypeScript 并遇到类似问题，我发现“scss”文件导入应该在 Webpack 开始的索引文件中。

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

【讨论】：