在webpack中使用postcss之插件包precss
precss是一个预处理css的插件包，集成了很多postcss插件的功能，比如嵌套，变量，继承，混合，循环，判断。下面来介绍如何在webpack中使用precss。
一、新建项目
1、新建package.json
#自动生成package.json文件 npm init
2、新建webpack.config.js
module.exports = {
entry: "./main.js",
output: {
path: __dirname, // __dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
},
devtool: "inline-source-map"
}
3、新建postcss.config.js
module.exports = {
plugins: [
require('precss'),
require('autoprefixer')
]
}
4、新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>postcss的插件包precss</title>
</head>
<body>
<div class="vars">变量</div>
<div class="nested">
<p>嵌套</p>
<strong>粗体加黑</strong>
</div>
<div class="mymixin">混合</div>
<div class="extended2">继承</div>
<div class="ani">引入，鼠标放上来</div>
<div class="condition">条件</div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
5、新建css/imported.css，css/style.css
/* imported.css */
body {
background: red;
}
.ani {
width: 400px;
height: 50px;
background: yellow;
transition: width 2s;
}
.ani:hover {
width: 800px;
}
/* style.css */
@import './imported.css';
*{
text-align:center;
margin:;
padding:;
}
$color: #CA1F2D;
.vars{
line-height:30px;
background:$color;
color:white;
}
.nested{
background:#FFA500;
padding: 8px 0;
p{
margin-top:;
color:white;
}
strong{
font-weight:normal;
&:after{
content:'这是粗体的after伪类';
margin-left: 15px;
color:grey;
}
}
}
%placeholder1{
background: #00BD00;
line-height: 35px;
}
.extended1{
font-size: 15px;
@extend %placeholder1;
}
@define-extend placeholder2{
background: #00BD00;
line-height: 35px;
}
.extended2{
font-size: 18px;
@extend placeholder2;
}
.placeholder3{
background: #00BD00;
line-height: 35px;
}
.extended3{
font-size: 25px;
@extend .placeholder3;
}
@define-mixin amixin $val:10px{
.mymixin{
color: yellow;
padding: $val 0;
@mixin-content;
}
}
@mixin amixin{
background: #00BBFE;
}
@mixin amixin 15px{
font-weight: bold;
}
@define-mixin tcondition $val:5{
.condition{
background: #4169e1;
@mixin-content;
@if $val < 5{
color: black;
} @else {
color: white;
}
}
}
@mixin tcondition{
font-size: 12px;
}
@mixin tcondition 3{
font-size:15px;
}
.for-tab{
float: left;
@for $i from 1 to 4 {
.tab-$i {
margin-right:5px;
background:black;
width: $(i)px;
}
}
}
.for-menu{
@for $i from 1 to 5 by 2 {
p:nth-of-type($i) {
margin-left: calc( 100% / $i );
background:black;
}
}
}
.each{
$loveAnimal: dog, tiger, lien;
@each $icon in $loveAnimal{
.icon-$(icon) {
/*background: url('icons/$(icon).png');*/
background:#f00;
}
}
}
6、新建main.js
import './css/style.css';
二、安装webpack的loader
cnpm i -D css-loader style-loader postcss-loader
三、安装postcss的插件
cnpm i -D precss autoprefixer
四、修改package.json文件
{
"name": "mypcs",
"version": "1.0.0",
"description": "this is my first postcss project",
"main": "main.js",
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack-dev-server",
"result": "webpack"
},
"repository": {
"type": "git",
"url": "mypcs"
},
"keywords": [
"postcss"
],
"author": "camille",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.4",
"css-loader": "^0.28.7",
"postcss-loader": "^2.0.6",
"precss": "^2.0.0",
"style-loader": "^0.18.2"
}
}
五、运行代码
npm run start
六、刷新视图页面看效果
七、总结
本篇文章介绍了如何在webpack中使用postcss的插件包precss，从新建项目到运行代码，思路比较清晰，下面主要总结我遇到的抓狂问题和解决方案，以及问题带给我的新思考，希望自己每解决一个问题，都能触类旁通，举一反三。讨厌问题，但是不拒绝问题，更不惧怕问题，因为方法总是有的，只要肯钻研。
1、问题描述
一开始我随意取了个文件夹名mypcs2，开发结束时，觉得自己的包名不太美妙，就重命名文件夹mypcs以及修改package.json文件中的name值。重新运行代码，竟然出现很多报错，说无法解析某个loader。真是郁闷！！！明明之前就安装了各种依赖的loader，瞧，文件夹里loader都在呢，为啥这会儿就不行了呢？代码呀什么的，我都没改呀，就修改了包名和package.json文件中的name值，有啥错？
2、问题分析
事实证明，大错特错！！！因为安装loader的时候，是明确在mypcs2包里进行的。现在要运行mypcs包，自然要在mypcs包里安装各种loader。
3、解决方案
把原来的node_modules文件夹删掉，然后重新安装loader。
4、深度思考
如果是插件，也会遇到上述问题，所以这里温馨提示，一开始确定好包名后，就不要再动了。不要修改包名，也不要复制一个旧包，在旧包上修修改改，做新项目。每做一个新包，都要按规矩办事，从头开始！切莫投机取巧，表面省事，结果给自己挖了个大坑，然后还不知道怎么爬出来，唉！奈何postcss的问题文档如此少，还很简陋。
另外，注意包名规则，比如postcss已经存在，就不要再用它了，选个别的名字，比如我的包名mypcs。
在webpack中使用postcss之插件包precss的更多相关文章
- 在webpack中使用postcss之插件cssnext
学习了precss插件包在webpack中的用法后,下面介绍postcss的另一个重要插件cssnext,步骤没有precss用法详细,主要介绍css4的语法,cssnext目前支持了部分新特性,你可 ...
- webpack中插件 prerender-spa-plugin 来进行SEO优化(二十四)
vue.react对于开发单页应用来说带来了很好的用户的体验,但是同样有缺点,比如首页加载慢,白屏或SEO等问题的产生.为什么会出现这种情况呢?我们之前开发单页应用是这样开发的,比如首页 index. ...
- 深入浅出的webpack构建工具---PostCss(五)
一:PostCss是什么? PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本, ...
- PHPCMS v9插件包整合
插件包是已经修改好的文件集合,您可以直接将插件包复制到您的网站中. 注意:插件包会替换phpcms中的文件,如果您修改过phpcms中的文件请先备份好旧的文件. 1.下载插件包 2.解压 3.复制里面 ...
- webpack中打包拷贝静态文件CopyWebpackPlugin插件
copyWebpackPlugin: 作用:用于webpack打包时拷贝文件的插件包 安装:npm install copyWebpackPlugin@版本号 使用:// copy custom st ...
- webpack 中常用安装插件的一些命令
1:npm install html-webpack-plugin --save-dev //自动快速的帮我们生成HTML.2:npm install css-loader style-loader ...
- webpack中clean-webpack-plugin插件使用遇到的问题及解决方法
webpack 会生成文件,然后将这些文件放置在 /dist 文件夹中,但是 webpack 无法追踪到哪些文件是实际在项目中用到的. 通常,在每次构建前清理 /dist 文件夹,是比较推荐的做法,因 ...
- webpack中如何使用vue
1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
随机推荐
- cell下载图片的思路 --无沙盒（内存）缓冲
// // ViewController.m // 06-表格图片下载 // // Created by jerry on 15/9/7. // Copyright (c) 2015年 jerry. ...
- 【Linux】VMware虚拟机中如何配置静态IP
此处详解如何在VMware虚拟机中配置静态IP. 上图是一个草图,大致说明下VMware网络情况.网段指某个IP范围,例如一栋小区楼和另一栋小区楼就不是一个网段 如果你在A小区,你女朋友在B小区,你想 ...
- ARMV8 Procedure Call Standard
1.前言 2. 术语说明 Term Note ABI Application Binary Interface 应用程序二进制接口 EABI Embedded ABI 嵌入式ABI PCS Pro ...
- vmware添加磁盘后linux无需重启识别的方法
cd /sys/class/scsi_host/ [root@centos4 scsi_host]# ls host0 host1 host2 有几个host就刷几次 [root@centos4 sc ...
- ES系列十六、集群配置和维护管理
一.修改配置文件 1.节点配置 1.vim elasticsearch.yml # ======================== Elasticsearch Configuration ===== ...
- suse系统开启ssh方法
1.防火墙放开ssh服务 打开/etc/sysconfig/SuSEfirewall2 文件,FW_SERVICES_EXT_TCP="ssh"可以定义开放ssh的服务 2.编辑s ...
- 最大流算法-最高标号预流推进(HLPP)
昨天我们学习了ISAP算法,它属于增广路算法的大类.今天学习的算法是预流推进算法中很高效的一类--最高标号预流推进(HLPP). 预流推进 预流推进是一种很直观的网络流算法.如果给到一个网络流让你手算 ...
- Qt Excel
在pro文件添加 QT +=axcontainer 头文件 #include <QAxObject> void MainWindow::on_btnSelectFileDialog_cli ...
- JS正则表达式大全(附例子)
0 前言 正则表达式用来字符串匹配,格式校验,非常cool且有趣. 1 正则表达式中的特殊字符 \ 做为转义,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符" ...
- LeetCode（58）： 最后一个单词的长度
Easy! 题目描述: 给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. ...