webpack css文件编译、自动添加前缀、剥离
1.css文件编译 webpack默认只能编译js文件,引入css需要loader支持 // css文件写入js中
npm i style-loader -D
// css文件loader
npm i css-loader -D webpack.config.js的rules中添加 {
test: /\.css$/,
use:['style-loader', 'css-loader']
} 2.css自动添加前缀 // postcss-loader 可以给css自动添加-webkit -ms前缀
npm i postcss-loader -D //autoprefixer插件,针对浏览器兼容设置
npm i autoprefixer -D // 增加postcss-loader的option
新增文件postcss.config.js,内容:
module.exports = {
plugins: {
autoprefixer: {
browsers: ['last 7 iOS versions', 'last 3 versions', '> 1%']
}
}
} 3.css剥离 //安装剥离插件(如果你是全局webpack,使用时会要你安装到当前项目)
npm i mini-css-extract-plugin -D webpack.config.js中引入并使用 //引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//添加到plugins数组中
plugins:[
new MiniCssExtractPlugin({
filename: "css/main.css",
})
]
//在rules中写入处理loader(之前的style-loader拿掉,因为不需要写入js文件了)
rules:[
{
test: /\.css$/,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
}
]
package.json文件:
{
"name": "csschange",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.6.1",
"css-loader": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"postcss-loader": "^3.0.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9"
}
}
webpack.config.js文件:
const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry:'./main.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'./dist')
},
module:{
rules:[
{
test: /\.css$/,
use:[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
}
]
},
plugins:[
new MiniCssExtractPlugin({
filename: "css/main.css",
})
]
}
postcss.config.js文件:
module.exports = {
plugins: {
autoprefixer: {
browsers: ['last 7 iOS versions', 'last 3 versions', '> 1%']
}
}
}
webpack css文件编译、自动添加前缀、剥离的更多相关文章
- webpack.config.js====CSS相关:postcss-loader加载器,自动添加前缀
1. 在webpack中加载css需要先安装style-loader 和 css-loader cnpm install --save-dev style-loader css-loader 2. 在 ...
- 用Emmet写CSS3属性会自动添加前缀
CSS3的很多属性都包含浏览器厂商前缀,用Emmet写CSS3属性会自动添加前缀,比如输入trs 会展开为: -webkit-transition: prop time; -moz-transitio ...
- Visual studio 创建文件时自动添加备注
Visual studio 创建文件时自动添加备注 描述 要求每回添加一个类,普通类或单元测试类文件头自动添加备注, 比如:Copyright, FileName, Author and so on. ...
- 如何将less编译成css文件__less自动编译成css的方法总结
作为css的预处理less,拥有着比css更快捷方便,扩展了css的变量.Mixin.函数等特性,使 CSS 更易维护和扩展. 如何你已经回使用css,那么less就很容易上手了.如果不使用less ...
- Xcode常用技巧(2)-使Xcode在创建类时自动添加前缀
在Xcode5之前的版本中,Xcode在新建项目时,会要求为一个类指定一个前缀,这样方便我们区分相同名字的类.而从Xcode6开始,由于Swift增加了命名空间的关系,Xcode在新建项目时,不会再要 ...
- Pycharm新建文件时自动添加基础信息
位置:File->settings->Editor->File and Code Templates->Python Script 添加以下代码: #!/usr/bin/env ...
- iOS: 在Xcode7系列中给类名自动添加前缀
添加前缀原因: 我个人还是很喜欢 Class Prefix 的,因为: 1. 使用它几乎不增加什么成本, 2. 不使用它可能会造成安全隐患, 3. 它能够以直接的方式编码一些信息以供未来的回溯, 4. ...
- 设置Pycharm在创建py文件时自动添加文件头注释(类似于钩子特性)
在每次新建一个py文件的时候 1 如何自动添加 #!/usr/bin/env python2 自动添加 #-*- coding: utf-8 -*- 操作方法: File -> se ...
- webpack配置根据浏览器自动添加css前缀的loader
1.安装 postcss-loader autoprefixer npm install postcss-loader autoprefixer --save-dev 2.配置webpack.conf ...
随机推荐
- ThinkPHP5使用phpspreadsheet导入导出Excel
引用类: use PhpOffice\PhpSpreadsheet\IOFactory; use PhpOffice\PhpSpreadsheet\Cell\Coordinate; use Php ...
- Linux中进程的几种状态
linux是一个多用户,多任务的系统,可以同时运行多个用户的多个程序,就必然会产生很多的进程,而每个进程会有不同的状态. Linux进程状态:R (TASK_RUNNING),可执行状态. 只有在该状 ...
- C#利用反射获取实体类的主键名称或者获取实体类的值
//获取主键的 PropertyInfo PropertyInfo pkProp = ).FirstOrDefault(); //主键名称 var keyName=pkProp.Name; //实体类 ...
- 004 API约定
在具体的学习前,我还是决定学一下,REST风格中在ES中的约定. 1.多重索引 先准备数据: 如果不小心,json里的值写错了,修改过来,重新执行即可. PUT index1/_doc/1 { &qu ...
- leetcode 139. Word Break 、140. Word Break II
139. Word Break 字符串能否通过划分成词典中的一个或多个单词. 使用动态规划,dp[i]表示当前以第i个位置(在字符串中实际上是i-1)结尾的字符串能否划分成词典中的单词. j表示的是以 ...
- ISO/IEC 9899:2011 条款6.5.5——乘法操作符
6.5.5 乘法操作符 语法 1.multiplicative-expression: cast-expression multiplicative-expression * cast-e ...
- ES6深入浅出-13 Proxy 与 Reflect-3.Vue 3 将用 Proxy 改写
如果说想打印出来年龄,但是有没有年龄的这个key值 把创建年龄写在一个按钮上面 通过一个事件来做. 点击创建年龄的按钮,给obj.age设置为18,但是页面的双向绑定并没有显示出来. 因为不响应式,为 ...
- 【430】BST and Splay Tree
参考:Hello, Splay! 目录: 1. Binary Search Tree 2. Splay Tree
- ABAP DEMO 年月的搜索帮助
效果图: *&---------------------------------------------------------------------* *& Report YCX_ ...
- 如何发布自定义的UI 组件库到 npmjs.com 并且编写 UI组件说明文档
记录基于 antd 封装业务组件并发布到npm 上的过程:(TS + React + Sass) 初始化项目: 1.yarn create react-app winyhui --typescript ...