react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们在写样式时,还必须要使用驼峰式的写法,所以,这无疑使我们不能接受的,最好的做法就是讲css文件写在一个单独的文件夹中外联进来。
webpack同时也是可以将css文件当做一个一个的模块的,所以,我们就需要对css模块的处理进行配置。
npm install css-loader style-loader --save-dev
其中的css-loader作用是使得webpack寻找css文件,style-loader的作用是为了使得css嵌入到html中。
webpack.config.js配置如下所示:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
接着我们就可以使用require()的方式引入css文件了。
如果我们希望使用less,那么我们就可以使用less-loader来处理了。 最终的代码如下:
module.exports = {
entry: ["./index.js"],
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
watch: true,
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
}
}
之前我在网上搜了很多的博客,每个人的说法似乎都不一致,并且都是只有自己才可以理解的,所以,在安装less这一步上我就浪费了不少的时间,而这次的效率之低让我意识到了这样的问题:
在寻找解决方案时,应该从源头上去寻找,比如:
这里的解决方案是从: https://doc.webpack-china.org/loaders/less-loader/ 这个网站上找到的,这里正是官方文档,是根源,他人写的所有的博客,其实最终也都是基于此而出现的
react&webpack使用css、less && 安装原则 --- 从根本上解决问题。的更多相关文章
- webpack react 单独打包 CSS
webpack react 单独打包 CSS webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件 操作步骤: step1: 安 ...
- 部署React+webpack工程的步骤
# 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部 ...
- 使用 Babel + React + Webpack 搭建 Web 应用
话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...
- webpack常用的插件安装命令
webpack常用的插件安装命令:1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loa ...
- React+webpack开发环境的搭建
首先创建项目,确保该项目已经安装了webpack和webpack-dev-server具体安装方法请参考上章所述. 在上一章说过babel是一个javascript编辑器,在react项目中使用bab ...
- 成功解决react+webpack打包文件过大的问题
最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...
- react +webpack 配置px2rem
项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) ...
- 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室
一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...
- 如何在react&webpack中引入图片?
在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了u ...
随机推荐
- 编写高质量代码改善C#程序的157个建议——建议101:使用扩展方法,向现有类型“添加”方法
建议101:使用扩展方法,向现有类型“添加”方法 考虑如何让一个sealed类型具备新的行为.以往我们会创建一个包装器类,然后为其添加方法,而这看上去一点儿也不优雅.我们也许会考虑修改设计,直接修改s ...
- Android colorAccent、colorPrimary、colorPrimaryDark actionbar toolbar navigationbar
伴随着Android5.0的发布也更新了support-v7-appcompat 到V21,其中增加了ToolBar.recyclerview.cardview等控件. Android5.0对改变AP ...
- Ubuntu下使用UFW,以及CentOS7的默认防火墙firewalld
UFW是一个简化版的iptables,基于iptables,配置比iptables简单 默认UFW是关闭状态,即Ubuntu默认打开所有端口,比较危险. 检测状态 ufw status 设置默认状态, ...
- Maven项目常见错误
一.Cannot change version of project facet Dynamic Web Module to 3.0. 和 One or more constraints have n ...
- Cookie、Session的具体使用
定义 保存在客户端浏览器的键值对. 作用场景 1.登录校验 2.保存用户的一些偏好信息 Cookie的查询 查询所有的Cookie信息: request.COOKIES 完整的Cookie信息就是一个 ...
- python基础,变量,if语句
一.python初识 python是一门 解释型弱类型编程语言. 特点: 简单.明确.优雅 二.python的解释器 CPython. 官方提供的. 内部使用c语言来实现 PyPy. 一次性把我们的 ...
- scrapy框架post请求发送,五大核心组件,日志等级,请求传参
一.post请求发送 - 问题:爬虫文件的代码中,我们从来没有手动的对start_urls列表中存储的起始url进行过请求的发送,但是起始url的确是进行了请求的发送,那这是如何实现的呢? - 解答: ...
- 机器学习 - ML + 深度学习 - DL
机器学习 CNCC - 2016 | 机器学习(原文链接) Machine Learning - ML,机器学习起源于人工智能,是AI的一个分支. 机器学习的理论基础:计算学习理论 - Computa ...
- PyQt5(1)——Qt Designer初探
相关环境配置我们就不介绍了(网上有很多教程) Qt Designer 是一款十分强大的GUI工具,生成的文件为 .UI文件 可以通过命令转化为Py文件,简单来说我们可以通过拖拽方式生成界面,在通过简 ...
- openstack 使用pbr配置,setup.cfg的格式与含义
pbr - Python Build Reasonableness A library for managing setuptools packaging needs in a consistent ...