webpack sass-loader 不生成 css 文件 [英] webpack sass-loader not generating a css file

问题描述

我不知道如何使用 webpack sass-loader 渲染 css 文件.

I can't figure out how to render a css file with the webpack sass-loader.

这是我的 webpackconfig.js 的样子:

Here's what my webpackconfig.js looks like:

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 模块加载器.

As you can see I'm using the sass-loader module loader specified in the documentation.

  {
    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 就可以了.

I can get everything else working such as html and jsx babble loaders. I just type in webpack into the command line and things happen.

我的 sass 加载器有问题.它是什么?请帮忙.

I'm doing something wrong with the sass loader. What is it? Please help.

推荐答案

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

You are using the style-loader, which, by default, embeds your CSS in Javascript and injects it at runtime.

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

If you want real CSS files instead of CSS embedded in your Javascript, you should use the ExtractTextPlugin.

基本配置是:

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

1. Add var ExtractTextPlugin = require('extract-text-webpack-plugin'); to the top of your Webpack config file.

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

Add the following to your Webpack config:

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

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

Change your SASS loader config to the following:

{
    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(来自您配置的入口部分).

What this does is extract all CSS it can find in your bundle to a separate file. The name will be based on your entrypoint name, which in your case will result in javascript.css (from the entry part of your config).

插件使用 ExtractTextPlugin.extract-loader 来查找代码中的 CSS 并将其放入单独的文件中.例如，您给它的第一个参数是它在遇到异步模块中的文件时应该回退到的加载器.通常这几乎总是style-loader.第二个参数告诉插件使用什么加载器来处理 CSS，在本例中为 css-loader 和 sass-loader，但诸如 postcss-loader 也经常使用.

The ExtractTextPlugin.extract-loader is used by the plugin to find the CSS in your code and put it in separate files. The first parameter you give it is the loader it should fall back to if it encounters files in an async module, for example. Generally this is pretty much always style-loader. The second parameter tells the plugin what loaders to use to process the CSS, in this case css-loader and sass-loader, but things like postcss-loader are often used too.

可以在此处找到有关使用 Webpack 构建 CSS 的更多信息:https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

More info on building your CSS with Webpack can be found here: https://webpack.github.io/docs/stylesheets.html#separate-css-bundle

这篇关于webpack sass-loader 不生成 css 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！