css-loader,style-loader:
在webpack中,所有文件资源都可以看成模块。css文件也可以作为模块引入到config.js配置对象的entry文件中。
1.entery文件中导入css
//entry.js:
import 'url.css'
2.配置文件中module.loaders添加
{
test:/.css$/, //RegExp不要加引号
use:['style-loader','css-loader'] 先css-loader再style-loader
}
ps:less、sass一样,安装sass需要安装ruby
3.使用后处理器postcss-loader,因为css3属性个浏览器还有待兼容,可能需要前缀或abias
npm i postcss-loader --dev-save
npm i autoprefixer --dev-save(postcss-loader插件)
配置:
在module的同级添加:
postcss:function(){
return [
require(pluginString)(optionObj), ...
]
}
PS:在css文件中@import引入的文件会以另一对style标签插入文档中;然而其内的css不会被处理:
solution:
在config.js的module.loaders的css配置对象中添加?importLoaders=n(n为该字段后loaders数,表示会对被import的css进行处理的插件数)
{
test:/.css$/,
loader:'style-loader!css-loader?importLoaders=1!postcss-loader'
}
css预处理less和sass:
个人习惯用sass
npm i sass-loader --save-dev
使用sass需要先安装ruby,安装完后使用可能会报错说node_modules找不到node-sass,打开package.son发现在devDependencies中确实只找到sass-loader,
npm i node-sass--save-dev
config.js中module.loaders添加:
{
test:/.scss$/,
use:['style-loader','css-loader','sass-loader']
}
即可正常使用。