常用loaders

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']
}

即可正常使用。

巴特西