react如何配置less(sass与less配置的方法基本一致,如果还是不会的朋友可以私信我)
接下来笔者会一步一步的跟朋友们一起去做配置
- 生成react项目,
create-react-app <你的项目名>
- 可以将src目录中的文件删的只剩index.js
index.js内容需要删减
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
- 创建一个App.js(此时查看是否能运行,显示App.js的内容)
App.js文件的内容:
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
我是最帅的吴小迪啊
</div>
)
}
}
此时发现内容以及展示出来了。
4. 创建App.less,并将文件引入到App.js中(import ‘./App.less’)
结果发现我们定义的样式并没有起作用。
5. 安装less包
npm i less less-loader -S
安装完毕之后先不要急着启动,现在启动也是没有用的,先要进行配置。
6. 进行less文件的配置,找到config中的dev文件中的CSS的配置
可以通过ctrl + F然后输入css快速找到其所在位置
7. 复制一份到css配置文件到下方,进行修改
为了编码少复制了花括号导致嵌套错误,可以将鼠标移动到左侧的位置会出现这个减号的标识,可以点击笔者用箭头标注的那个减号。
然后可以选中此内容,进行ctrl+C,如果你是VScode编辑器可以直接ctrl+d加↓方向键就会直接复制一份到下方,关于VScode的快捷键可以关注笔者的另外一篇博客。
将刚刚复制的内容改成笔者下面的代码样子。
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader'),
options: {
javascriptEnabled:true //如果你要使用antd的话就要加上此配置,否则使用antd的时候会报错
},
},
],
},
- 配置完选项,需要重启项目才能生效
重新npm start一下你就会发现我们的less语法以及起作用了。
- 如果要发布到线上了,那么在之前要在config的webpack.config.prod.js中的内容进行修改,将下面的新增内容放到test: /\.css$/的那个模块下面。新增内容如下:
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader'),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
}
],
},
extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
- npm run build检查是否会报错
PS:新版本的react可能与上面的配置方法不一致,请随时查看官方变动!
PS:新版本的react可能与上面的配置方法不一致,请随时查看官方变动!
PS:新版本的react可能与上面的配置方法不一致,请随时查看官方变动!