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

【问题标题】：How to generate regular CSS file from SASS?如何从 SASS 生成常规 CSS 文件？
【发布时间】：2015-07-03 07:50:57
【问题描述】：

我通常使用

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

然后在main.js

require('./styles.sass')

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

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

我试过了：

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

但它会生成 styles.js 而不是 .css 文件。此外，如果我在头部包含styles.js，那么我会在控制台中收到来自styles.js 的以下错误：

Uncaught ReferenceError: webpackJsonp is not defined

【问题讨论】：

【解决方案1】：

使用extract text plugin。

把这个放在你的loaders:

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

...在你的plugins:

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

改编自...

【讨论】：

【解决方案2】：

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

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

在我倾向于放置我的 js、css 和图像文件夹的 public 文件夹中，我总是制作一个批处理文件。像这样：

cd "`dirname "$0"`"
sudo sass --watch css/sass:css

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

希望对你有帮助

【讨论】：