create-react-app使用less最詳細說明 2019-04-13

描述

建立步驟和官網一直，你們能夠查看官網，下面簡單列舉下.

建立項目

npx create-react-app my-app

cd my-app/

eject出配置文件

npm run eject
或者
yarn eject

安裝less

less和less-loader都要安裝。less是支持less語法的，less-loader是webpack使用來編譯less的。

npm install less less-loader --save

配置webpack.config.js

修改config/webpack.config.js

新增less配置變量

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;  // 新增less配置
const lessModuleRegex = /\.module\.less$/; // 新增less配置，這個其實不配置也行

增長module下面rule規則，能夠copy cssRegex或者sassRegex的配置。

{
    test: sassModuleRegex,
    use: getStyleLoaders({
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent
        },
        "sass-loader"
    )
}, 
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({
            importLoaders: 1,// 值是1
            modules: true, // 增長這個能夠經過模塊方式來訪問css
            sourceMap: isEnvProduction && shouldUseSourceMap
        },
        "less-loader"
    ),
    sideEffects: true
}, 
// 這個測試刪了也不影響
{
    test: lessModuleRegex,
    use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent
        },
        "less-loader"
    )
},
// "file" loader makes sure those assets get served by WebpackDevServer.

須要注意一下幾個地方：

1.lessRegex中importLoaders的值爲1

固然這個是2也能使用，可是它的值是根據lessRegex變量後面正則中匹配的loader數來決定的，好比 const cssRegex = /\.css$/只是處理css一種類型的文件，那應該就是1； const sassRegex = /\.(scss|sass)$/;對應的是scss和sass兩種類型，那就應該是2.

2.lessRegex的use中增長modules配置

modules能夠不設置，不設置的話，less只能經過字符串名的方式使用，好比定義了一個 .title,引用時 import './index.less'，使用時： <div className="title"></div>

若是須要經過模塊的方式調用，則須要把modules設置成true，就能夠經過styles.title方式使用了。import styles from './index.less',使用<div className={styles.title}></div>

第二種配置方式

能夠不增長新的變量，把css的配置包含less

const cssRegex = /\.(css|less)$/; //增長less
const cssModuleRegex = /\.module\.(css|less)$/;

{
    test: cssRegex,
    exclude: cssModuleRegex,
    use: getStyleLoaders({
            importLoaders: 2,// 改爲2
            modules: true,//使用模塊方式訪問樣式
            sourceMap: isEnvProduction && shouldUseSourceMap
        },
        "less-loader" //增長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
}

全文完！！！