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