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'
  }

我的root是这样的：

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

我可以让其他的一切都正常工作，比如html和jsx babble加载程序。我只需在命令行中键入webpack，事情就会发生。

我的sass装载器出了点问题。那是什么？请帮帮忙。

Answer 1

您使用的是style-loader，默认情况下，它会将CSS嵌入到Javascript中，并在运行时注入它。

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

基本配置为：

1. 将var ExtractTextPlugin = require('extract-text-webpack-plugin');添加到您的Webpack配置文件的顶部。
2. 将以下内容添加到您的Webpack配置中：

插件：[ new ExtractTextPlugin('name.css')，]

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

{ .css : /.scss$/，ExtractTextPlugin.extract：.css(‘样式加载器’，//不构建样式文件时的备份加载器' CSS - loader !sass-loader‘//用于预处理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

Answer 2

使用TypeScript并遇到类似的问题，我发现'scss‘文件导入应该在索引文件中，这就是Webpack开始的位置。

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