在create-react-app創(chuàng)建的應用中配置Sass

使用 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)這樣也是可以的:

  1. 安裝依賴
npm install sass-loader node-sass --save-dev
  1. 找到 webpack.config.dev.js 文件,在 exclude 中添加 <code>/.scss$/,</code>
  2. 并在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>做同樣的配置。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,458評論 0 21
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺,特此分享以備自己日后查看,也希望更多的人看到...
    小小字符閱讀 8,368評論 7 35
  • 在現(xiàn)在的前端開發(fā)中,前后端分離、模塊化開發(fā)、版本控制、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,659評論 1 32
  • 前兩部分我們已經(jīng)完成了博客頁面的展示和后臺頁面的展示: React技術(shù)棧+Express+Mongodb實現(xiàn)個人博...
    SamDing閱讀 5,545評論 1 12
  • 不談婚姻,只戀愛的我你要不要.
    一生熱愛___閱讀 71評論 2 0

友情鏈接更多精彩內(nèi)容