代码之家  ›  专栏  ›  技术社区  ›  Evol Rof

如何在create react app中将less用作变量

  •  0
  • Evol Rof  · 技术社区  · 6 年前

    我正在使用CreateReact应用程序 react-app-rewire-less , react-app-rewired

    在一个新的安装后,我发现less没有像我预期的那样工作。

    使用 className="header" 很好,但是 className={styles.header} 不起作用。

    config-overrides.js

    const rewireLess = require('react-app-rewire-less');
    
    module.exports = function override(config, env) {
    
    config = rewireLess.withLoaderOptions({
           javascriptEnabled: true
       })(config, env);
       return config;
    };
    

    这是我的App.js,换一下就行了 import './App.css'; import styles from './App.less'; styles.header 用于标题样式

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import styles from './App.less';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <header className={styles.header}>
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
    }
    
    export default App;
    

    App.css 到“App.less”和 App-header header react-script

    1 回复  |  直到 6 年前
        1
  •  0
  •   Evol Rof    6 年前

    只是 npm install --save-dev react-app-rewire-less-modules

    **.less 文件到 **.module.less

    更改配置文件

    const rewireLess = require("react-app-rewire-less-modules");
    module.exports = function override(config, env) {
      config = rewireLess.withLoaderOptions({
        javascriptEnabled: true,
      })(config, env);
      return config;
    };