配置less

安装less-loader

yarn add less-loader

打开 webpack.config.dev.js 和 webpack.config.prod.js

找到  test: /\.css$/,  修改为  test: /\.(css|less)$/,

找到 text 字段下的 use ,给use数组在添加一个对象 { loader: require.resolve('less-loader')}

重启服务

启用css作用域(css只对本页面生效)

打开 webpack.config.dev.js 和 webpack.config.prod.js

找到 loader: require.resolve('css-loader') 下的  options 字段, 给这个对象新增一个字段 modules: true

 

页面调用

import style from './style.less'
console.log(style) // class名均为style对象的key,所以调用必须使用style.App
render() {return (
<div className={style.App}>
</div>
)
}

重启服务 & 查看效果

px转换成rem

安装 postcss-px2rem

yarn add postcss-px2rem

打开 webpack.config.dev.js 和 webpack.config.prod.js

// 调用postcss-px2rem
const px2rem = require('postcss-px2rem')

在css-loader中找到  autoprefixer  这个属性,在这个属性之后添加  px2rem({ remUnit: 75 })

autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9' // React doesn't support IE8 anyway
],
flexbox: 'no-2009'
}),
px2rem({ remUnit: 75 })

重启服务 & 查看效果

附 : 完整代码

webpack.config.dev.js

// webpack.config.dev.js
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true // 是否启动css局部作用域
}
},
{
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'
}),
px2rem({ remUnit: 75 }) //设计稿根据750px(iphone6)
]
}
},
{
loader: require.resolve('less-loader')
}
]
},

webpack.config.prod.js

// webpack.config.prod.js
{
test: /\.(css|less)$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false
}
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true, // 是否启动css局部作用域
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'
}),
px2rem({ remUnit: 75 }) //设计稿根据750px(iphone6)
]
}
},
{
loader: require.resolve('less-loader')
}
]
},
extractTextPluginOptions
)
)
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},

style.less

.App {
text-align: center;
font-size: 16px;
.goto {
color: red;
}
}

App.vue

// 页面调用
import style from './style.less'
// console.log(style) 输出:{App:{...},goto:{...}}
<div className={style.App}>
<Link to="/series" className={style.goto}>
跳转
</Link>
</div>

Resct配置less的更多相关文章

  1. 配置android sdk 环境

    1:下载adnroid sdk安装包 官方下载地址无法打开,没有vpn,使用下面这个地址下载,地址:http://www.android-studio.org/

  2. Android Studio配置 AndroidAnnotations——Hi_博客 Android App 开发笔记

    以前用Eclicps 用习惯了现在 想学学 用Android Studio 两天的钻研终于 在我电脑上装了一个Android Studio 并完成了AndroidAnnotations 的配置. An ...

  3. react-router 组件式配置与对象式配置小区别

    1. react-router 对象式配置 和 组件式配置    组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...

  4. 总结:Mac前端开发环境的搭建(配置)

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  5. Android Studio 多个编译环境配置 多渠道打包 APK输出配置

    看完这篇你学到什么: 熟悉gradle的构建配置 熟悉代码构建环境的目录结构,你知道的不仅仅是只有src/main 开发.生成环境等等环境可以任意切换打包 多渠道打包 APK输出文件配置 需求 一般我 ...

  6. Virtual Box配置CentOS7网络(图文教程)

    之前很多次安装CentOS7虚拟机,每次配置网络在网上找教程,今天总结一下,全图文配置,方便以后查看. Virtual Box可选的网络接入方式包括: NAT 网络地址转换模式(NAT,Network ...

  7. [linux]阿里云主机的免登陆安全SSH配置与思考

    公司服务器使用的第三方云端服务,即阿里云,而本地需要经常去登录到服务器做相应的配置工作,鉴于此,每次登录都要使用密码是比较烦躁的,本着极速思想,我们需要配置我们的免登陆. 一 理论概述 SSH介绍 S ...

  8. nginx配置反向代理或跳转出现400问题处理记录

    午休完上班后,同事说测试站点访问接口出现400 Bad Request  Request Header Or Cookie Too Large提示,心想还好是测试服务器出现问题,影响不大,不过也赶紧上 ...

  9. Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置(服务端+iOS端)

    本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...

随机推荐

  1. android开发(2):多页面的实现 | Fragment的创建与使用

    APP中出现多个页面再常见不过了.使用activity与fragment都能实现多页面,这里使用fragment来实现.延续“知音”这个APP的开发,之前已经创建了底部导航条与mainactivity ...

  2. 11个教程中不常被提及的JavaScript小技巧

    这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略. 1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是 ...

  3. 详解 Java NIO

    文件的抽象化表示,字节流以及字符流的文件操作等属于传统 IO 的相关内容,我们已经在前面的文章进行了较为深刻的学习了. 但是传统的 IO 流还是有很多缺陷的,尤其它的阻塞性加上磁盘读写本来就慢,会导致 ...

  4. filezilla通过root账户远程连接管理ubuntu server服务器文件

    前言: 准备重温一下今天在工作中遇见的一个问题,在刚刚安装上的server上测试,做好的文件不是很好传到server项目目录,于是使用了filezilla这个工具,它可以使用ssh来连接,于是乎就引入 ...

  5. netty源码解解析(4.0)-9 ChannelPipleline的默认实现-链表管理

    io.netty.channel.DefaultChannelPipeline implements ChannelPipleline   DefaultChannelPiple给出了ChannelP ...

  6. centos7指定yum安装软件路径

    网上的命令都是垃圾 yum -c /etc/yum.conf --installroot=/opt/all_venv/ --releasever=/ install nginx 该命令简单解释如下: ...

  7. c# 封装Dapper操作类

    using Dapper; using DapperExtensions; using System.Collections.Generic; using System.Configuration; ...

  8. Ajax实现的城市二级联动三

    把之前2篇整合在一起 1.html <select id="province"> <option>请选择</option> </selec ...

  9. SQL Anywhere5.5: Metadata

    http://dcx.sybase.com/1101/en/dbprogramming_en11/ianywhere-data-sqlanywhere-saconnection-getschem633 ...

  10. wangEditor-基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费(2)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...