Webpack 3.0 的学习笔记(2)

SASS 文件的打包和分离

安装SASS 打包的loader  node-sass sass-loader

1.npm install --save-dev node-sass

2.npm install --save-dev sass-loader

编写loader配置

{

test: /\.scss$/,

use: [{

loader: "style-loader" //   creates style nodes from JS strings

}, {

loader: "css-loader" //   translates CSS into CommonJS

}, {

loader: "sass-loader" //   compiles Sass to CSS

}]

}

注意:loader的加载是有先后循序的

Sass 文件的编写:

$nav-color:#FFF;

#nav{

$width:100%;

width:$width;

height:30px;

background-color:$nav-color;

}

最终的效果应该可以实现sass的打包了

把SASS 文件分离:

{

test: /\.scss$/,

use:extractTextPlugin.extract({

use:[{

loader:"css-loader"SASS 文件的打包和分离

安装SASS 打包的loader  node-sass sass-loader

1.npm install --save-dev node-sass

2.npm install --save-dev sass-loader

编写loader配置

{

test: /\.scss$/,

use: [{

loader: "style-loader" //   creates style nodes from JS strings

}, {

loader: "css-loader" //   translates CSS into CommonJS

}, {

loader: "sass-loader" //   compiles Sass to CSS

}]

}

注意:loader的加载是有先后循序的

Sass 文件的编写:

$nav-color:#FFF;

#nav{

$width:100%;

width:$width;

height:30px;

background-color:$nav-color;

}

最终的效果应该可以实现sass的打包了

把SASS 文件分离:

{

test: /\.scss$/,

use:extractTextPlugin.extract({

use:[{

loader:"css-loader"

}, {

loader:"sass-loader"

}],

// use style-loader in development

fallback:"style-loader"

})

}

自动处理css3属性前缀

Postcss-loader 给css3属性自动添加前缀

为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀

浏览器前缀目前包括

-webkit-

-moz-

-ms-

-o-

postCss 是一个css的处理平台,可以帮助css实现更多的功能

安装

Npm install --save-dev postcss-loader      autoprefixer(自动添加前缀的插件)

在webpack.config.js      同级目录下新建立一个postcss.config.js 的文件

在新建的postcss.config.js文件里面配置:

module.exports={

plugins:[

require('autoprefixer')

]

}

编写loader

{

test: /\.css$/,

use:[

{

loader:"style-loader"

},{

loader:"css-loader",

options:{

modules:true

}

},{

loader:"postcss-loader"

}

]

}

提取css:

配置提取css的loader配置

{

test: /\.css$/,

use:extractTextPlugin.extract({

fallback:'style-loader',

use:[

{loader:'css-loader',options:{importLoaders:1}},

'postcss-loader'

]

})

}

更多postcss的功能,需要我们自己自学

postcss-loader的github地址:

https://github.com/postcss/postcss-loader

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 7,165评论 7 35
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 7,450评论 40 248
  • Webpack学习总结 此文只是自己学习webpack的一些总结,方便自己查阅,阅读不变,非常抱歉!! 下载安装:...
    Lxs_597阅读 684评论 0 0
  • 清晨,阅读会像咖啡一样,使人精神一整天
    优雅小姐Zoe阅读 40评论 0 0