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

{ 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

2015-07-03 user606521

把这个在您的loaders:

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

...在你的plugins:

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

改编自...

2015-07-05 14:54:46

当我在我的项目中使用无礼的话，我在大多数情况下都使用相同的文件结构。至少当涉及到CSS文件夹。

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

在public文件夹，我倾向于把我的JS，CSS和图像文件夹，我总是做一个批处理文件。就像这样：

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

这适用于我所有的项目。我只是运行它并尽量减少窗口。这会查找更改并将Sass转换为常规css到style.css文件。然后在我的index.html我只包括css/style.css。

希望这有助于你

2015-07-03 08:10:33

但我希望它被处理实际上通过webpack。 – user606521

回答