什么是网站建设和维护wordpress本地同步
- 引入外部 css文件
 
import './index.css'
 
此时引入的样式是全局样式
- 使用less 
-  
安装
npm i style-loader css-loader sass-loader node-sass -D -  
生成config文件夹
npm run eject -  
配置
以上代码运行完,会在根目录生成config文件夹
进入 config > webpack.config.js 查找 sass 将 less预处理器 注册,如下

// 头部定义 const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/;{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 2,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,},'less-loader'),sideEffects: true, }, {test: lessModuleRegex,use: getStyleLoaders({importLoaders: 2,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,},'less-loader'),sideEffects: true, },- 重新运行项目
 
 
 -  
 
css模块化
react中没有类似vue的scoped,因此需要做css模块化
- 需要修改文件后缀名为.module.css
 
如
- 然后引入
 
import indexObj from './index.module.less'
 
- 使用
 
class ShoppingList extends React.Component {render () {return (<div className={indexObj['cmi-nav']} id='header'>头部</div>);}
}export default ShoppingList
 
- 效果 
 


