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

即可正常使用。

原文地址:https://www.cnblogs.com/alan2kat/p/7247312.html