11装入less
{
test: /\.less$/,
exclude: [/node_modules/],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName:"[name]__[local]___[hash:base64:10]"
},
},
// {
// // loader: require.resolve('postcss-loader'),
// },
{
loader: require.resolve('less-loader'), // compiles Less to CSS
},
],
},
要安装less-loader 还有less 模块
要在less里用背景图片,用了相对路径来引入图片 background: url(../assets/img/logo.png);,这时候会报无法解析图片
这是在webpack.config.js里要做设置
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
// exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
test: /\.png$/,
loader: require.resolve('file-loader'),
// options: {
// name: 'static/media/[name].[hash:8].[ext]',
// },
},
要用多个样式
import classNames from 'classnames'
npm i classnames --save-dev
className={classNames(styles.left,styles.active)}
样式里要给属性设置样式 例如给input里的placeholder设样式
&::placeholder{
color:#999
}
要变全局变量就要:global,不管是在什么文件样式里
无法使用箭头函数,这时候要安装
npm install babel-preset-es2015 --save-dev
npm install --save-dev babel-preset-stage-0
.babelrc里面:
"presets": ["react", "env","es2015","stage-0"],
redux
npm i redux react-redux --save-dev
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
redux
套路:先创建action,再给store 再去reducer,reducer再返回store,数据更新

浙公网安备 33010602011771号