Electron-React 实战(二) -- less

Less

Less是一门css预处理语言，在原生css的基础上增加了变量、Mixin、函数等特性，使css更容易维护和扩展，也可以说是css的语法糖。less的嵌套功能能让css看起来很简洁，减少了很多重复的代码，用了感觉十分酸爽。

react-electron 引入 less

1.下载

首先得下载less

yarn add less less-loader --save

下载成功后。

2.修改webpack配置文件

react-electron默认是不支持less编译的，但是能支持sass，所以，下载less后，根据sass的配置，再复制一份，把sass改成less,就大功告成了。

进入configs文件夹

your-project-name/configs

修改webpack.config.renderer.dev.babel.js文件的以下部分

module: {
    rules: [
      {
        test: /\.global\.(less)$/,    --------新增部分
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'less-loader'
          }
        ]
      },
      {
        test: /^((?!\.global).)*\.(less)$/,  --------新增部分
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
               modules: {
                 localIdentName: '[name]__[local]__[hash:base64:5]'
               },
              sourceMap: true,
              importLoaders: 1
            }
          },
          {
            loader: 'less-loader'
          }
        ]
      }
    ]
  }

修改webpack.config.renderer.prod.babel.

module: {
    rules: [
      {
        test: /\.global\.(less)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 1
            }
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /^((?!\.global).)*\.(less)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              // modules: {
              //   localIdentName: '[name]__[local]__[hash:base64:5]'
              // },
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
    ]
  },

修改后，重新运行项目，less就能支持了。

3.less文件引入

目录中有login.tsx文件

...
import  './login.less';   //引入less文件
...

export default function Login(props: Props) {
    return (
        <div className="在less文件中定义的类名">
        </div>
    )
}

或者

...
import  styles from  './login.less';   //引入less文件
...

export default function Login(props: Props) {
    return (
        <div className={styles.("在less文件中定义的类名")}
        >
        </div>
    )
}

结语

到这里，less已经成功引入了，在less的世界里开心地徜徉吧。。。