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
网友评论