我不得不自己做一些修补,但最终落在了以下位置
包.json
"autoprefixer": "^6.3.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"node-sass": "^3.8.0",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0"
网络包配置
...
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
...
const config = {
...
postcss: [
autoprefixer({
browsers: ['last 2 versions']
})
],
plugins: [
new ExtractTextPlugin('css/bundle.css'),
],
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!postcss!sass')
}
]
}
...
};
引导程序.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import style from './scss/style.scss';
ReactDOM.render(
<App/>,
document.getElementById('my-app')
);
对于那些感兴趣的人:这里发生的bootstrap.jsx
是 webpack 入口点,通过导入我们的原始scss
文件(通过相对路径),我们告诉 webpack 在构建过程中包含它。
此外,由于我们loader
在配置 () 中为此文件扩展名指定了 a .scss
,webpack 能够style.scss
通过定义的加载器从右到左解析和运行它:sass --> post-css --> css
.
然后,我们使用extract-text-webpack-plugin
将编译后的 CSS 从bundle.js
它通常所在的位置拉出,并将其放置在css/bundle.css
相对于我们的输出目录的位置 () 中。
此外,extract-text-webpack-plugin
在这里使用是可选的,因为它只会从 bundle.js 中提取 CSS 并将其放入单独的文件中,如果您使用服务器端渲染,这很好,但我也发现它在调试过程中很有帮助,因为我有一个scss
我对编译感兴趣的特定输出位置。
如果您希望看到这一点,这里有一个使用它的小样板:https ://github.com/mikechabot/react-boilerplate