如何從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

回答