webpack 处理CSS
1、安装插件
npm i style-loader css-loader --save-dev
npm i postcss-loader --save-dev
npm i autoprefixer --save-dev
npm install postcss-import --save-dev
style-loader插件为:通过注入<style>
标签将CSS添加到DOM中
autoprefixer 自动添加前缀
postcss-import:支持使用@import引入css
2、项目目录结构:
common.css为:
@import './flex.css';
html,body{
padding:;
margin:;
background-color: red;
}
ul{
list-style: none;
margin:;
}
flex.css为:
.flex-div{
display: flex;
}
app.js为:
import './css/common.css';
import layer from './components/layer/layer.js'
const App = function(){
console.log(layer)
} new App()
3、webpack.config.js配置文件为:
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'js/[name].js'
},
module: {
loaders: [{
test: /\.js$/,
//以下目录不处理
exclude: /node_modules/,
//只处理以下目录
include: /src/,
loader: "babel-loader",
//配置的目标运行环境(environment)自动启用需要的 babel 插件
query: {
presets: ['latest']
}
},
//css 处理这一块
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
//支持@important引入css
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
//一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
require('postcss-import')(),
require("autoprefixer")({
"browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
})
]
}
}
}
]
}
]
},
plugins: [
new htmlWebpackPlugin({
template: 'index.html',
filename: 'index.html'
})
]
}
4、执行编译&查看结果
npm run webpack
webpack 处理CSS的更多相关文章
- CSS预编译与PostCSS以及Webpack构建CSS综合方案
CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...
- webpack导入css及各项loader
1. webpack导入css 1) 下载相关的加载器 npm install style-loader css-loader -D 2)将index.css引入到mian.js中 import '. ...
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们 ...
- webpack教程——css的加载
首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...
- Webpack打包css后z-index被重新计算的解决方法
发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...
- webpack抽取CSS文件与CSSTreeShaking
webpack抽取CSS文件 CSSTreeShaking 一.webpack抽取CSS文件 抽取CSS文件的插件:mini-css-extract-plugin npm install --save ...
- webpack 提取css成单独文件
webpack 提取css成单独文件 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = requir ...
- boi剖析 - 基于webpack的css sprites实现方案
本文是58到家前端工程化集成解决方案boi的博文系列之一.boi是基于webpack打造的一站式前端工程化解决方案,现已开源Github. 作为前端构建工具不可或缺的一个环节,自动生成css spri ...
- [AngularJS + Webpack] Requiring CSS & Preprocessors
Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By ...
- 使用webpack打包css和js
1.安装webpack. npm install webpack -g 2.创建一个文件夹app. 3.新建文件test.js. require("!style-loader!css-loa ...
随机推荐
- unity热更新
Unity3D 学习笔记4 —— UGUI+uLua游戏框架 C#Light 和 uLua的对比第二弹 在Unity中使用Lua脚本:语言层和游戏逻辑粘合层处理 Ulua_toLua_基本案例 Uni ...
- Running CMD.EXE as Local System(转)
Many times in the past I had to run an interactive command-line shell under the Local SYSTEM account ...
- HDU 2222 Keywords Search 【AC自动机模板】
询问有多少个模式串出现在了文本串里面.将模式串插入Trie树中,然后跑一边AC自动机统计一下就哦了. 献上一份模板. #include <cstdio> #include <cstr ...
- 初识云计算的三种服务模式 (IaaS SaaS PaaS)
近期公司在使用其它云服务的同一时候.要封装自己的云服务,以下作为开发产品前的热身.来了解云计算中的三种服务模式,笔者也是从网络上查找,进行综合总结.请拍.. 三种服务模式 依据如今最经常使用.也就是比 ...
- 浅谈Android RecyclerView
Android RecyclerView 是Android5.0推出来的,导入support-v7包即可使用. 个人体验来说,RecyclerView绝对是一款功能强大的控件. 首先总结下Recycl ...
- 软件系统分析师与架构师技能大PK(您具备了哪些呢?)
博客转处:http://blog.csdn.net/china_video_expert/article/details/38335613 软件系统分析师与架构师在职责与技能方面没有明显的界线,你中有 ...
- Rsync服务介绍与配置
Rsync 简要介绍 rsync 是一个用于增量文件传输的开源工具,不得不说,rsync简直是不同服务器间传输文件.同步文件的利器.与FTP相比,它具有非常简单的安装和配置方法.而且,rsync可以只 ...
- 网站功能操作分布引导插件:Intro.js介绍;React里如何使用Intro.js以及如何进行分页导航
插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...
- 用过Retina视网膜屏幕的笔记本电脑的后果
用过Retina视网膜屏幕的笔记本电脑的后果是过程中感觉很不错,但是结果是普通屏幕再也看不上眼了.发现了原来看的好好的屏幕多出了许多的像素点,没办法,火眼金睛了.
- textarea自动增长宽高
<script type="text/javascript"> $(function(){ $("#iptcont").bind("key ...