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;
}
最終的效果應(yīng)該可以實現(xiàn)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;
}
最終的效果應(yīng)該可以實現(xiàn)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實現(xiàn)更多的功能
安裝
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的功能抵赢，需要我們自己自學(xué)
postcss-loader的github地址：
https://github.com/postcss/postcss-loader
