(一)

  处理普通的.css 文件,需要安装 css-loader,style-loader

     .less 文件,需要安装 less-loader

      .sass 文件,需安装  less-loader

npm install --save-dev css-loader
npm install --save-dev css-loader
npm install less-loader --save-dev

(二)

  在项目中,我们会遇到 不同浏览器,前缀不同。比如 display: flex ,在IE以及谷歌下前缀是不同的,

  这时候,我们需要 postcss 这样的插件

npm install postcss-loader --save-dev
npm install autoprefixer --save-dev

安装好相关loader后,我们需要在webpack.config.js 中 加入相关配置代码,如下

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
console.log(__dirname);
module.exports = {
/*context: __dirname,*/
entry: './src/app.js', output: {
path: './dist',
filename: 'js/[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js
},
module: {
loaders: [
{
test: /\.css$/, //正则表达式,匹配.css文件
loader: 'style!css?importLoaders=1!postcss' //处理顺序 从右到左
                // ?importLoaders=1 表示 引入嵌入的 css文件也会按照postcss这样自动添加前缀
},
{
test: /\.less$/,
loader: 'style!css!postcss!less'
}
],
rules: [{
test: /\.(css|scss|less)$/,
loader:"style-loader!css-loader?importLoaders=1!postcss-loader" //由于webpack2.X 版本对post-css书写方式的改变
                                              //需要新添加 postcss.config.js
}]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', //通过模板生成的文件名
template: 'index.html',//模板路径
inject: 'body' //是否自动在模板文件添加 自动生成的js文件链接 })
]
};

  postcss.config.js 代码如下

module.exports = {
plugins: [
require('autoprefixer')({
browsers: 'last 5 version' //前五种浏览器版本
})
]
};

  

import layer from './components/layer/layer.js';
import './css/common.css'; const App = function () {
console.log(layer);
} new App();

app.js

layer.js

import './layer.less';

function layer(){
return{
name:'layer',
tpl:'tpl'
};
} export default layer;

 

//layer.less
.layer{
width:600px;
height: 200px;
border: 1px solid yellow;
} //common.css
@import "flex.css";
html{
background-color: red;
} ul,li{
padding:;
margin:;
list-style:none;
}
.styleFlex {
display: flex;
} //flex.css
.flexFlex {
display: flex;
}

相关css

  使用webpack 编译后,可以查看,相关css以及被编译在index.html,前缀css 自动完成。

  

webpack(四)处理 css\less\sass 样式的更多相关文章

  1. Webpack干货系列 | 怎么运用 Webpack 5 处理css/scss/sass、less、stylus样式资源

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解webpack 5 如何高效处理CSS 资源.scss/sass 资源.l ...

  2. Angularjs快速入门(四)-css类和样式

    例子: .error{background-color:red;} .warning{background-color:yellow;} <div ng-controller='HeaderCo ...

  3. webpack快速入门——CSS进阶:SASS文件的打包和分离

    1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...

  4. 四种CSS样式的引入方式

    准备 1.首先准备一个html文件:test.html,不建议使用记事本创建文件,建议使用Notepad++来创建并编辑文件,注意编码格式为:以UTF-8无BOM格式编码,否则会出现中文乱码,内容如下 ...

  5. webpack.config.js====CSS相关:css和scss配置loader

    1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev ...

  6. 在vue-cli 3中, 给stylus、sass样式传入共享的全局变量

    在开发中有时,我们定义了大量的基础样式变量,例如: 大量的vue单文件组件会用到这些变量,每个组件都引人一次又太麻烦.全局引入是个不错的方法,于是,在main.js 中引入variable.styl文 ...

  7. 让 JavaScript 与 CSS 和 Sass 对话

    JavaScript 和 CSS 已经并存超过了 20 年.但是在它们之间共享数据非常困难.当然也有大量的尝试.但是我所想到的是一些简单而直观的内容——不涉及结构更改,而是使用 CSS 自定义属性甚至 ...

  8. [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  9. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

随机推荐

  1. UVa 10148 - Advertisement

    题目大意:有一些广告牌,为了使跑步者看到固定数量的广告,设计所需租用的最少数量的广告牌. 其实就是区间选点问题:数轴上有n个区间[ai, bi],取尽量少的点,使得每一个区间都至少有一个点.首先对区间 ...

  2. mysql 5.5中文乱码问题

    一.登录MySQL查看用SHOW VARIABLES LIKE ‘character%’;下字符集,显示如下:+--------------------------+----------------- ...

  3. PHP中PDO错误/异常(PDOException)处理

    PDO 提供了三种不同的错误处理模式,以满足不同风格的应用开发: PDO::ERRMODE_SILENT 此为默认模式. PDO 将只简单地设置错误码,可使用 PDO::errorCode() 和 P ...

  4. js原生设计模式——4安全的工厂方法模式之Factory方法模式

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. poj 1013(uva 608) Counterfeit Dollar

    #include <cstdio> #include <cstdlib> #include <cstring> #include <cmath> #in ...

  6. 在Java中打开浏览器

    try { Runtime.getRuntime().exec( "explorer http://www.baidu.com"); java.net.URI uri = new ...

  7. doubango(3)--协议栈的启动过程

    协议栈启动的上层接口 对于Doubango中得sip协议栈,是通过SipStack类粘合上层代码与底层代码的,该类定义在SipStack.h中,实现在SipStack.cxx中.当构造好一个SipSt ...

  8. Canvas createRadialGradient API

    Canvas createRadialGradient API <!DOCTYPE html> <html lang="en"> <head> ...

  9. Android项目实战(二十九):酒店预定日期选择

    先看需求效果图: 几个需求点: 1.显示当月以及下个月的日历 (可自行拓展更多月份) 2.首次点击选择"开始日期",再次点击选择"结束日期" (1).如果&qu ...

  10. HTML5中将video设置为背景的方法

    主要用到了video标签,css样式,原理是先将video标签利用position:fixed;使video标签脱离文档流,在将他的z-index设置为最低的,比如-9999.再插入的内容自然就覆盖在 ...