无法使用 Webpack 从 SASS 创建 CSS答案

【问题标题】：Can't create CSS from SASS using Webpack无法使用 Webpack 从 SASS 创建 CSS
【发布时间】：2017-06-02 03:01:35
【问题描述】：

我创建了一个包含以下内容的最小文件 global.sass（取自 here）。

$font-stack:    Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color

在我的 webpack.config.js 中，我已将以下加载器添加到模块部分（第二个来自 here，如 Webpack 页面 here 上所建议的那样）。

module: {
  loaders: [
    { test: /\.js$/, loader: "babel", exclude: /node_modules/ },
    { test: /\.sass$/, loader: "sass-loader", exclude: /node_modules/ }
  ]
},

在我轻信的希望中，我认为运行 webpack --progress 会生成一个 CSS 文件，但显然没有发生类似的情况。我只得到一个新版本的 bundle.js 但 global.sass 文件的内容不在其中。根本没有生成任何 CSS 文件。

【问题讨论】：

嗨。澄清一下：您是否需要/导入global.sass 某处？
你需要先导入那个文件
@mrlew 不，我不是。我的印象是 Webpack 会为我生成一个 CSS 文件，我可以在我的 HTML 中链接到该文件。我从你的评论中得出结论，我错了。我在哪里放置需求/导入？直接在 Webpack 的配置文件中？还是在我的 index.js 中？
@AdamWolski 实际上，我不会像现在这样导入该文件。我怎么做？我应该更改 Webpack 的配置还是应该在起始 JavaScript 文件中添加 import？我期待生成一个 CSS，但根本没有考虑链接到 SASS 文件。
@AndyJ 我创建了一个答案（这里没有足够的空间）

标签： javascript css sass webpack

【解决方案1】：

首先，您需要在您的样式文件的某个地方提出要求。

例如，如果你的入口文件是main.js，你可以有这样的东西：

require('./global.sass');
/* or, if you're using es6 import:

    import css from './global.sass'; 
*/

稍微澄清一下这个过程：sass-loader 处理.sass 文件并将其转换为有效的css 文件（假设在内存中）。然后，您必须链接（向后）加载器以最终将样式添加到您的页面：

默认配置是：

loaders: [
    /* ... */
    { 
        test: /\.sass$/, 
        loaders: ["style-loader", "css-loader", "sass-loader"], 
        exclude: /node_modules/ 
    }
    /* ... */
]

css-loader 解析 CSS 文件，style-loader 在 <head> 的底部添加一个 <style> 标记以符合您的风格。

在运行之前，请确保您已经安装了这些软件包：

npm i css-loader style-loader sass-loader node-sass --save-dev

但是，您可以使用流行的 extract text plugin 将所有样式提取到单独的 css 文件中。

我们可以说，然后，总结一下，webpack 不会生成一个单独的 css 文件，因为 style-loader（它会在你的 DOM 中添加一个 style 标签），除非你使用 extract text plugin（非常常见在产品构建中）。

【讨论】：

哦，所以这三个加载器都在内存中工作？我知道了。然后我明白了对插件的需求。我不明白为什么我们必须使用 style-loader 如果我们缩进插入 CSS 文件并链接到它？另外，我不确定为什么该插件会成为生产中的首选方法。 +1 以获得出色的配方。
@AndyJ 据我所知，主要担心的是当你有一个巨大的应用程序时，你会有一堆<style> 标签。有些人更喜欢可分发的文件，主要是为了缓存/指纹。
@AndyJ 如果你使用插件，你不需要style-loader。根据docs，仅用于回退目的。
嗯...好的，我明白了。似乎合乎逻辑。但是，我现在收到一个错误：Unexpected token (1:5) 当我在 SASS 文件中添加/删除行时，数字不会改变（仍然是 1:5）。这也表明我需要另一个装载机。不过，您建议的所有加载程序都已安装。请问我还有什么做错的吗？
更正错误部分。它只会在有font 的那一行吠叫。其他的不会产生任何错误。不过，仍然需要验证它们是否计入文件中。