Question

通常我使用

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

然后在main.js

require('./styles.sass')

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

Answer 1

将其放入loaders:

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

...并在您的plugins:

中

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

改编自......

Answer 2

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

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

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

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

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

希望这有助于你