react项目中使用 Sass 或者 Less

注意：1. 使用脚手架 create-react-app 创建的 react项目，默认使用了webpack ==>> 请注意webpack的版本

           2. create-react-app 创建的 react项目，webpack配置默认是隐藏的，如果需要查看或者修改，请使用 npm run eject 命令，

           3. 如果webpack是4.x的版本，配置文件 webpack.config.js （一个文件），否则会有 webpack.config.dev.js 和 webpack.config.prod.js 两个文件

 

一、使用 Sass  ==>> 简单

首先，看一下webpack.config.js中对css的默认配置：

        create-react-app 创建的 react项目，默认就是支持Sass的，使用只需要安装一下  node-sass 这个包即可使用

        命令： npm install node-sass -D

测试Sass：

1）创建文件 src/test.scss  ==>> 后缀名：.scss

$themeColor: #17B3A3;
p{
  background: $themeColor;
  span{
    color: #0f0
  }
}

2）在App.js 中引入使用

import React from 'react';
import './test.scss'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p className='box'>
          React.
          <span>你好</span>
        </p>
      </header>
    </div>
  );
}

export default App;

3）效果

 

二、使用Less  ==>> 相对复杂

1. 安装依赖包：cnpm i --save-dev less less-loader   （less 、less-loader两个包）

2. 修改webpack配置  ==>> webpack版本4.x以上，才只用改webpack.config.js一个文件，否则需要改两个哦

        2.1 在 webpack.config.js 中 "style files regexes" (40行) 添加 less   ==》即照着Sass改一份Less的

        增加的代码如下：

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;


// 或者改成这样
// const lessRegex = /\.(scss|less)$/;
// const lessModuleRegex = /\.module\.(scss|less)$/;

        2.2 增加 Less 编译配置

        增加代码如下：==》即照着Sass改一份Less的

  //  ====================== 第二处 ==================
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

这样，Less的配置就完成了

 

测试Less：

 

1）创建文件 src/test.less  ==>>  后缀名：.less

@themeColor: #17B3A3;
p{
  background: @themeColor;
  span{
    color: #fcc;
  }
}

2）在App.js 中引入使用

import React from 'react';
import './test.less'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p className='box'>
          React.
          <span>你好</span>
        </p>
      </header>
    </div>
  );
}

export default App;

3）效果

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！