摘要:網上看了很多配置,最后才發現后就不用就可以使用特性,那么仿照的配置即可的使用將文件名為配置暴露配置文件安裝依賴修改文件配置,一共修改三處第一處增加定義變量第二處仿照配置第三處修改函數內部,增加圖片描述測試是否安裝成功
網上看了很多配置,最后才發現create-react-app2.0后就不用eject就可以使用css module特性,那么less仿照css的配置即可1.css module的使用 將CSS文件名為[filename].module.css import styles from "./index.module.css"; 2.配置less
暴露webpack配置文件
cnpm run eject
安裝lessless-loader依賴
npm install less less-loader --save-dev
修改webpack.config.js文件配置,一共修改三處
第一處:增加定義變量 ``` const cssRegex = /.css$/; const cssModuleRegex = /.module.css$/; const sassRegex = /.(scss|sass)$/; const sassModuleRegex = /.module.(scss|sass)$/; const lessRegex = /.less$/; const lessModuleRegex = /.module.less$/; ``` 第二處:仿照css配置less ``` { test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, }), // Don"t consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css { test: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }), }, // Opt-in support for SASS (using .scss or .sass extensions). // By default we support SASS Modules with the // extensions .module.scss or .module.sass { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, }), // Don"t consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules (https://github.com/css-modules/css-modules) // using the extension .module.css { test: lessModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }), }, ``` 第三處:修改getCSSModuleLocalIdent函數內部,增加less ![圖片描述][2]3測試是否安裝成功
建立以module.less為結尾的less文件
通過module引入less到index
import styles from "./my.module.less" render() { console.log(styles.text) return () }Hello World
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103747.html
摘要:網上看了很多配置,最后才發現后就不用就可以使用特性,那么仿照的配置即可的使用將文件名為配置暴露配置文件安裝依賴修改文件配置,一共修改三處第一處增加定義變量第二處仿照配置第三處修改函數內部,增加圖片描述測試是否安裝成功 網上看了很多配置,最后才發現create-react-app2.0后就不用eject就可以使用css module特性,那么less仿照css的配置即可 1.css mo...
摘要:一初始化項目新建文件夾,文件名文件夾名稱不要用,這類關鍵字,后面使用插件時會發生錯誤。未設置會報一個警告。四在項目中使用安裝。 一、初始化項目 新建文件夾,文件名firstreact 文件夾名稱不要用react,node這類關鍵字,后面使用插件時會發生錯誤。 init項目環境,項目信息可默認或自行修改 mkdir firstreact cd firstreact npm ...
安裝 首先你需要點擊這里安裝 nodejs(npm)。然后執行: 建立一個目錄作為項目根目錄并初始化: mkdir react-webpack cd react-webpack/ npm init 安裝相關組件 這里包括了本文所需要的全部組件 npm i --save-dev react react-dom react-transform-hmr webpack webpack-dev-serve...
摘要:支持轉義轉義需要的依賴,支持裝飾器。在中增加的配置數組中。壓縮文件安裝依賴在中的中增加配置打包前先清空輸出目錄在中增加的配置至此,配置已經基本能滿足需求。 webpack 核心概念: Entry: 入口 Module:模塊,webpack中一切皆是模塊 Chunk:代碼庫,一個chunk由十多個模塊組合而成,用于代碼合并與分割 Loader:模塊轉換器,用于把模塊原內容按照需求轉換成...
閱讀 725·2021-11-17 09:33
閱讀 3757·2021-09-01 10:46
閱讀 1751·2019-08-30 11:02
閱讀 3280·2019-08-29 15:05
閱讀 1396·2019-08-26 11:39
閱讀 2272·2019-08-23 17:04
閱讀 1973·2019-08-23 15:43
閱讀 1371·2019-08-23 14:12