react1.6版本新增sass與less的支援
在新版本的react中分別新增sass與less支援,注意是用create-react-app腳手架工具建立的專案。
新增sass支援
新增sass支援非常簡單,只需要執行以下命令安裝node-sass即可,如果不生效,請重啟專案。
npm i node-sass --save
新增less支援
新增less支援稍微有點麻煩,因為對sass的支援在create-react-app腳手架中已經配置好了,但是less的沒有配置,需要我們手動配置,請按照以下步驟:
安裝less和less-loader
npm i less less-loader --save
釋放eject
npm run eject
此命令會在當前目錄下生產config資料夾
修改配置檔案
開啟/config/webpack.config.js檔案,找到以下程式碼:
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
`sass-loader`
),
},
// **********
//**********
// **********
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
// This loader doesn`t use a "test" so it will catch all modules
// that fall through the other loaders.
在以上程式碼中,原來的程式碼是沒有,只是為了突出這個位置,可以看到已經配置好了sass,把*替換為以下程式碼,然後重啟即可。
// 新增less-loader
{
test: /.less$/,
use: [
require.resolve(`style-loader`),
{
loader: require.resolve(`css-loader`),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve(`less-loader`) // compiles Less to CSS
}
],
},
以上。
相關文章
- LESS與SASS的區別
- webstrom配置sass與lessWeb
- postcss支援vue/less/css/sass檔案CSSVue
- sass和less的區別
- sass/scss 和 less的區別CSS
- css前處理器--Sass,Less,StylusCSS
- Vue 應用 Sass、Scss、Less 和 StylusVueCSS
- LESS/SASS/Stylus開發工具彙總
- webpack的css,less,sass中使用絕對路徑WebCSS
- CSS 即將支援巢狀,SASS/LESS 等前處理器已無用武之地?CSS巢狀
- post-css/less/sass樣式巢狀與命令之"&"符號—BEMCSS巢狀符號
- 細談sass和less中的變數及其作用域變數
- 在 Create React App 中啟用 Sass 和 LessReactAPP
- 關於sass、scss、less的概念性知識彙總CSS
- Facebook 重構:拋棄 Sass / Less ,迎接原子化 CSS 時代CSS
- VUE專案無法啟動NODE版本與NODE-SASS、SASS-LOADER版本不相容解決方案Vue
- Excelize 釋出 2.4.1 版本,新增併發安全支援Excelize
- less,sass,stylus配置和應用教程及三者比較
- 詳細比較三個CSS前處理器(框架)Sass/LESS/StylusCSS框架
- sass與gulp應用
- vue中sass與SCSS的區別VueCSS
- go-carbon 1.4.3 版本釋出,新增對json.UnmarshalJSON()的支援GoJSON
- 學習Sass @mixin 與 @include
- SASS入門與實踐
- php新增yaml支援PHPYAML
- Go-carbon 1.1.1版本釋出了,完善對主流ORM的支援,新增公共方法GoORM
- Amazon Global Accelerator 的新增功能 — 網際網路協議版本 6(IPv6)支援協議
- DBSync新增對MongoDB、ES的支援MongoDB
- 版本包新增地址
- BEM,SASS,LESS,bootstrap:如何有效地將這些方法,工具和框架聰明地整合?boot框架
- node-sass和node版本不相容問題
- bitShark對Android版本的支援Android
- Mysql之新增innodb支援MySql
- EMQX Enterprise 新版本釋出:新增 Apache IoTDB 支援、HStreamDB 最新版MQApache
- sass變數詳解——你不知道的sass。變數
- 在 Windows 的 WampServer 新增 PHP 版本WindowsServerPHP
- getElementsByClassName()方法的瀏覽器支援版本瀏覽器
- JAVA JDK不同版本對JFrame的支援JavaJDK