Webpack sass在哪里是css文件 [英] Webpack sass where is the css file

问题描述

我正在使用带有sass加载器的web包，如下所示：

I am using web pack with sass loader like this:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass"
      }
    ]
  }
};

但我看到样式适用于样式标记，生成css文件在哪里？

But i see the styles apply to the style tag, where is the generate css file?

推荐答案

默认情况下，样式加载器将已编译的css内联到您的包中，该包使用输出文件添加到页面的头部，例如 bundle.js 。使用 extract-text-webpack-plugin ，您可以从中删除已编译的css捆绑，并将其导出到单独的文件。

By default, the style-loader inlines the compiled css into your bundle, which added to the head of the page with the output file e.g. bundle.js. Using the extract-text-webpack-plugin you can remove the compiled css from the bundle, and export it to a separate file.

首先 - 将您的加载程序包装在插件中：

First - wrap your loader in the plugin:

 loaders: [{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract(
    "style",
    "css!sass")
 }]
},

然后告诉插件是什么调用它生成的文件：

Then tell the plugin what to call the file it generates:

plugins: [
    new ExtractTextPlugin("app.css")
 ]

通常在HTML中包含此文件。

Include this file in your HTML normally.

这篇关于Webpack sass在哪里是css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！