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混音加载程序. 我只是在命令行中输入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屋！