react css拓展 使用less

react 之中使用less 

  其實質只需要看一下resct 使用css的配置項，就能明白個大概了

 第一步  

還是下載

 npm i  less less-loader -save 下載less 和 less_loader

第二步

因為使用 create-react-app react腳手架搭建的項目，默認是把配置文件隱藏的  所以需要暴漏它

yarn eject 暴露配置文件 然后終端會詢問你是否確認暴漏 y就夠了

第三步

打開webpack.config.js 文件

 

找到使用匹配loader的正則表達式，項目應該都將它們放在一起了,這樣也便於修改 照着css的樣子添加less

 

 第四步 找到

sassRegex 的配置項，recta 腳手架是默認使用sass的,並且還編寫了一些處理loader正則匹配的方法，這個就涉及到webpack的使用了，在此就不多述，感興趣的朋友可以自己去了解

第五步 仿照sass配置的模板 添加下列配置

 保存，重新啟動服務 然后就 大功告成了，至於為什么會有一個lessModuleRegex 配置，這是一個關於模塊化代碼的問題，我的上一邊文章會有講述，

 還有一個拓展，當進行開發的時候往往會將一些共有的樣式提取出來，放在一個樣式文件中，如果每次用到公用樣式的地方都需要引用一次樣式文件就太麻煩了。所以我們可以這樣

先下載

npm i style-resources-loader

然后在剛才我們改動的地方加上

保存 重啟服務 就可以愉快的使用less了

react定義less全局變量

 　　有些公用樣式我們可能會在很多地方使用到它，如果在每一個用到它的地方使用@import未免太繁瑣了，所以我們可以使用style-resources-loader來將一些公用的less樣式變量，定義為全局變量，這樣在使用的時候就不需要每次引入那么麻煩了。這個方法在module文件中也是生效的。

　　需要的插件有

　　less

　　less-loader

　　style-resources-loader

　　在webpack.config.js中進行如下修改

//less loader配置
                        {
                            test: lessRegex,
                            exclude: lessModuleRegex,
                            use: [
                                ...getStyleLoaders(
                                    {
                                        importLoaders: 3,
                                        sourceMap: isEnvProduction && shouldUseSourceMap,
                                    },
                                    'less-loader'
                                ),
                                {
                                    loader: "style-resources-loader",
                                    options: {
                                        patterns: path.resolve(__dirname, "../src/assets/style/public.less")
                                    }
                                },
                            ],
                            sideEffects: true,
                        },
                        //less module loader 配置
                        {
                            test: lessModuleRegex,
                            use: [
                                ...getStyleLoaders(
                                    {
                                        importLoaders: 3,
                                        sourceMap: isEnvProduction && shouldUseSourceMap,
                                        modules: {
                                            getLocalIdent: getCSSModuleLocalIdent,
                                        },
                                    },
                                    'less-loader',
                                ),
                                {
                                    loader: "style-resources-loader",
                                    options: {
                                        patterns: path.resolve(__dirname, "../src/assets/style/public.less") //注意一定要確保路徑的正確，因為路徑不正確在npm run start時也不會報錯，但是當你使用public.less中的樣式變量時（假設是.test1）
因為沒有正確的引入樣式變量文件，將會爆出 .test is undefined 的錯誤，切記！！！！！！
                                    }
                                },
                            ]
                        },

好了現在就去愉快的使用吧