Javascript Can'；t使用Webpack从SASS创建CSS

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

在我的webpack.config.js中，我将以下加载程序添加到模块部分（第二个加载程序取自webpack页面上的建议）

---

在我轻信的希望中，我认为运行

webpack--progress

会生成一个CSS文件，但显然，没有发生类似的事情。我只得到了bundle.js的新版本，但global.sass文件的内容不在其中。根本没有生成CSS文件。

首先，您需要在某个地方创建样式文件

例如，如果您的输入文件是

main.js

，则可以有如下内容：

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

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

稍微澄清一下过程：

sass加载程序

处理

.sass

文件，并将其转换为有效的

css

文件（在内存中）。然后，您必须链接（向后）加载程序，以最终将样式添加到页面：

默认配置为：

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

其中解析CSS文件，并根据您的样式在

底部添加一个

标记

在运行之前，请确保已安装以下软件包：

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

但是，您可以使用流行的样式表将所有样式提取到一个单独的

css

文件中

---

总之，我们可以说，由于

样式加载器

（在DOM中添加

样式

标记），webpack不会生成单独的css文件，除非您使用

提取文本插件

（在产品构建中非常常见）。

Hi。只是想澄清一下：您是否需要/导入

global.sass

文件？您需要导入该文件first@mrlew不，我不是。我的印象是Webpack将生成一个CSS文件，我可以在HTML中链接到该文件。根据你的评论，我的结论是我错了。我应该把require/import放在哪里？是否直接在网页包的配置文件中？或者在我的index.js？@adamwalski中，事实上，我并没有像现在这样导入该文件。我该怎么做？我应该更改Webpack的配置还是应该在开始的JavaScript文件中添加

import

？我期待一个CSS被生产，并且没有考虑链接到SASS文件。@ ANDYJ我创建了一个答案（这里没有足够的空间）哦，所以所有的三个加载器都在内存中工作？我懂了。然后我明白了插件的必要性。我不明白的是，如果我们缩进以插入CSS文件并链接到它，为什么我们必须使用样式加载器？另外，我不确定为什么插件会成为生产中的首选方法+1是一个很好的公式。@AndyJ据我所知，主要的问题是当你有一个巨大的应用程序时，你会有一堆

标签。有些人更喜欢可分发的文件，主要用于缓存/指纹。@AndyJ如果使用该插件，则不需要

样式加载程序

。根据法律，只是为了撤退的目的。嗯。。。好吧，我明白了。似乎合乎逻辑。但是，我现在得到了一个错误：意外的标记（1:5），当我在SASS文件中添加/删除行时，数字没有改变（仍然是1:5）。它还建议我需要另一个加载器。不过，您建议的所有装载机都已安装。请问，我还能做错什么？纠正错误部分。它只在有字体的行上吠叫。其他的没有产生任何错误。不过，仍然需要验证它们是否在文件中计数。

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

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