使用 create-react-app 配置 react 開發(fā)環(huán)境,像下面這樣,就可以構(gòu)建一個新的 react 單頁面應用,非常方便。
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
但是現(xiàn)在的 create-react-app(react.15.6.1) 去掉了默認支持Sass等預處理器,官方文檔說明,有如何配置預處理器,如果我們要使用預處理器時,就需要我們自己來配置,在按著官方文檔進行配置時,npm start 是有效果的,但是當我改動 scss 文件時,就會報錯,可能是我沒配置好吧。然后就在網(wǎng)上查找了一些相關(guān)配置,發(fā)現(xiàn)這樣也是可以的:
- 安裝依賴
npm install sass-loader node-sass --save-dev
- 找到 webpack.config.dev.js 文件,在 exclude 中添加 <code>/.scss$/,</code>
- 并在loaders中添加一項:
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
像這樣:

至此,Sass 就配置好了。
注意,我們只是修改了 <code>webpack.config.dev.js</code> ,如果要在生產(chǎn)環(huán)境中生效,需要在<code>webpack.config.prod.js</code>做同樣的配置。