Resct配置less
2018-11-09 02:36:09来源:博客园 阅读 ()
配置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>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:Git SSH公钥配置
- JSP session配置对web应用的影响 2019-12-27
- 详解jqPlot Option配置对象 2019-08-29
- vue中使用proxy配置不同端口和ip接口 2019-08-14
- webpack打包配置禁止html标签全部转为小写 2019-08-14
- vue3.0 vue.config.js 配置实战 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash