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 加载器上做错了。它是什么？请帮忙。

Answer 1

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

如果你想要真正的 CSS 文件而不是 CSS 嵌入你的 Javascript，你应该使用 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

Answer 2

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

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

webpack sass-loader 不生成 css 文件

webpack sass-loader not generating a css file

sass

loader

webpack