Less is a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other features, making the CSS easier to maintain and expand. Most of the time, in order to write convenient, in the project will directly use less for style writing. Later in the webpack process, use the form [‘style-loader’, ‘CSS-loader ‘, ‘less-loader’] to package the less resources directly into js files.

Recently due to the needs of the project, the need for a number of different platform provides the React component library, the function of the same component in different platforms consistent, but the style is different, if the package is still using the above way, obviously it is difficult to meet the needs of different platforms for different styles, so I began to research the relevant solutions. In the process of solution research. Reviewed the source code of several well-known component libraries. It is found that in well-known component libraries such as Ant-Design, the writing of the React component is separate from the writing of the style. In the process of using the React component, users also need to introduce packaged CSS style files. How do you convert less files into CSS files?

Use the less conversion function in ANTD-Tools for the conversion

When I first read the ant-Design source code, I found that Ant-Design is also styled with less, so there must be a way to package less files into CSS files.

Json to compile less into a CSS file:

"compile:less": "antd-tools run compile:less"
Copy the code

Antd-tools = antD-tools; antD-tools = antD-tools; antD-tools = antD-tools

const less = require('less');
const fs = require('fs');
const path = require('path');
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const NpmImportPlugin = require('less-plugin-npm-import');

function transformLess(lessFile, config = {}) {
    const { cwd = process.cwd() } = config;
    const resolvedLessFile = path.resolve(cwd, lessFile);

    let data = fs.readFileSync(resolvedLessFile, 'utf-8');
    data = data.replace(/^\uFEFF/.' ');

    // Do less compile
    const lessOpts = {
        paths: [path.dirname(resolvedLessFile)],
        filename: resolvedLessFile,
        plugins: [new NpmImportPlugin({ prefix: '~'})].javascriptEnabled: true};const toWritePath = path.resolve(__dirname, '.. /lib'.'index.css');
    return less.render(data, lessOpts)
        .then(result= > postcss([autoprefixer]).process(result.css, { from: undefined }))
        .then(r= > r.css);
}
Copy the code

After a simple transformation of the above code, my requirements have been basically completed, and the relevant demo can be referred to: github.com/wujc16/less… .

The lessc command is packaged directly

After observing the tools and functions above, I found that transformLess actually uses the less package to transform. I wondered if there is a similar command line conversion method provided by an official or a third party. After installing less, you can use the lessc command to convert:

npm install less --dev
npx lessc ./src/index.less ./lib/index.css
Copy the code

In particular, the installed package is less, but the conversion uses the lessc! Command.

conclusion

To here, in fact, basically completed my needs, just need to unify the different themes of each style file to the corresponding entry less file, after the unified compilation command can generate the corresponding theme of THE CSS file.