如何从 SASS 生成常规 CSS 文件？

Question

一般我用

{ test: /\.sass$/, loader: 'style!css!sass?indentedSyntax' }

然后在main.js

require('./styles.sass')

但它在加载 main.js 时使用 javascript 应用样式。问题是我的应用程序最初是同构的，returns 一些 html。因为我在 </body> 标签之前加载 main.js，所以将样式应用于文档有点太晚了（用户暂时看到没有样式的 HTML）。

因此我想从 styles.sass 生成常规 css 文件，然后简单地在 <head></head> 中包含 id 以确保它最初被加载。如何生成常规 css 文件？

我试过了：

entry: {
  styles: path.resolve(__dirname, 'app/styles.sass')
}

但它生成 styles.js 而不是 .css 文件。此外，如果我在 head 中包含 styles.js 那么我会在 styles.js:

的控制台中收到以下错误

Uncaught ReferenceError: webpackJsonp is not defined

Answer 1

当我在我的项目中使用 Sass 时，我在大多数情况下使用相同的文件结构。至少在涉及 css 文件夹时。

├── index.html
├── /css 
│   ├── style.css
│   ├── /sass
│   ├───── style.scss
│   ├───── ...

在我倾向于放js的public文件夹里，css和images文件夹，我总是做一个批处理文件。像这样：

cd "`dirname "[=11=]"`"
sudo sass --watch css/sass:css

这适用于我的所有项目。我只是运行它并最小化 window。这会查找更改并将 Sass 转换为常规 css 到 style.css 文件。然后在我的 index.html 中我只包含 css/style.css.

希望对你有帮助

Answer 2

将此放入您的 loaders:

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

...在您的 plugins:

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

改编自...

How to generate regular CSS file from SASS?