webpack sass-loader没有输出css文件

我不能为我的生活弄明白如何使用web pack 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$/,loaders: ["react-hot","babel-loader"],// SASS
      {
        test: /\.scss$/,loader: 'style!css!sass'
      }

    ],}

}

正如你可以看到我正在使用文档中指定的sass-loader moduel loader。

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

我的根看起来像这样：

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

我可以得到一切工作，如html和jsx babble装载机。 bla bla。
我只是键入webpack到命令行和事情发生。

我做了一些错误的萨斯加载程序。
它是什么？
请帮忙。

解决方法

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

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

基本配置将是：

> Add var ExtractTextPlugin = require(‘extract-text-webpack-plugin’);到您的Webpack配置文件的顶部。
>将以下内容添加到您的Webpack配置：

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

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

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

这是什么是提取所有的CSS它可以找到你的捆绑包到一个单独的文件。该名称将基于您的entrypoint名称，在您的情况下将导致javascript.css(从您的配置的条目部分)。

ExtractTextPlugin.extract-loader由插件用于在代码中查找CSS并将其放在单独的文件中。你给它的第一个参数是它应该回退到，如果它遇到一个异步模块中的文件，例如加载器。通常这是几乎总是风格。第二个参数告诉插件使用什么加载器来处理CSS，在这种情况下是css-loader和sass-loader，但是postcss之类的东西也经常使用。

有关使用Webpack构建CSS的更多信息，请访问：https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

原文地址：https://www.jb51.cc/css/220099.html