Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "React how to configure less and less global variables", so the editor summarizes the following contents, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "React how to configure less and less global variables" article.

1. Configure Less

1. Download and install the plug-in less in the project as follows:

Npm install-save less less-loader or yarn add-save less less-loader

two。 Expose Profil

We use this string of code yarn eject.

3. Configure the webpack.config.js file.

We find a regular expression in the project that matches loade, and add less as css. The code is as follows:

Const cssRegex = /\ .css $/ const cssModuleRegex = /\ .module\ .css $/ const sassRegex = /\. (scss | sass) $/ const sassModuleRegex = /\ .module\. (scss | sass) $/ const lessRegex = /\ .less $/ const lessModuleRegex = /\ .module\ .less $/

4. Configure less

We find the previously set sass in our known project, and then we find the location of sass by configuring less, and configure less below it.

We can complete the configuration by adding code, and it will take effect after reboot.

2. Less global variable

1. Install the plug-in

We install the style-resource plug-in in the project with the following code:

Npm install-save-dev style-resources-loader and yarn add-save-dev style-resources-loader

When this is done, we will configure it in our configuration less in the first step

And here we should note that after ues sets the global variable here, our "{}" will become [], and the path of the patterns in our setting must be set correctly, let's take a look at the following code! , you can use it as a reference!

/ / configure less-Start {test: lessRegex, exclude: cssModuleRegex, use: [. GetStyleLoaders ({importLoaders: 3, sourceMap: isEnvProduction? ShouldUseSourceMap: isEnvDevelopment,}, 'less-loader'), {loader:' style-resources-loader', options: {patterns: path.resolve (_ _ dirname,'. / src/common.less'),},},], sideEffects: true,}, {test: lessModuleRegex Use: [. GetStyleLoaders ({importLoaders: 3, sourceMap: isEnvProduction? ShouldUseSourceMap: isEnvDevelopment, modules: {getLocalIdent: getCSSModuleLocalIdent,}, 'less-loader'), {loader:' style-resources-loader', options: {patterns: path.resolve (_ _ dirname,'. / src/common.less'),},},],} / / configure less-End above is the content of this article on "how React configures global variables for less and less" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.