React(Webpack5)配置LESS、SASS

创建react-app

Getting Started | Create React App (create-react-app.dev)

# yarn create react-app my-app
# cd my-app
# ls
README.md  node_modules/  package.json  public/  src/  yarn.lock
# yarn start

暴露webpack5

最新安装的是 webpack5

webpack 中文文档 (docschina.org)

# yarn eject
# ls 
README.md  config/  node_modules/  package.json  public/  scripts/  src/  yarn.lock

配置LESS、SASS

安装依赖

// 安装处理css文件的loader
# yarn add style-loader css-loader
// 安装处理less文件的loader
# yarn add less-loader less
// 安装处理scss文件的loader
# yarn add sass-loader node-sass

配置config文件下的 webpack.config.js

module > rules > oneOf 下新增规则

{
    // test设置需要匹配的文件类型，支持正则
    test: /\.css$/,
    // use表示该文件类型需要调用的loader
    use: ['style-loader', 'css-loader'],
},
{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader'],
},
{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
}

测试

src/test.scss

.less {
  font-size: 32px;
  h1 {
    color: #f40;
  }
}

src/test.scss

.scss {
  font-size: 32px;
  h1 {
    color: #ff0;
  }
}

src/App.js

import './test.less'
import './test.scss'
function App() {
  return (
    <div className="App">
      <div className='less'>
        <h1>LESS</h1>
      </div>
      <div className='scss'>
        <h1>SCSS</h1>
      </div>  
    </div>
  );
}

export default App;