css文件处理的方法步骤，以及需要用的loaders。

css文件简单处理

根据上一篇内容，可以通过webpack简单打包，一个js文件。但是一般咱们会在js中引入样式文件，这样将js和css有关的内容，打包到一个js文件中。这样在开发插件或者是某一个模块的时候会比较方便，相同的内容打包在一起。

  • 按照上一节步骤，新建一些文件在src目录中，例如：

    效果图

  • src下的脚本文件：

    • 内置脚本，src/a.js代码如下：
    a();//执行a
function a(){
    console.log('a.js');
}
    • 样式src/test.css：
    body{
    background:lightcyan;
}
.div1{
    background:green;
    width:32px;
    height:32px;
}
    • 入口文件，src/test.js：
    require('style-loader!css-loader!./test.css');

require('./a.js');

b();

function b(){
    console.log('test.js');
}

  • 加入样式需要的loader，执行：cnpm install webpack style-loader css-loader --save-dev

    • css-loader：让webpack可以加载.css文件；
    • style-loader：让.css通过style的方式加载到目前文件js中，在页面中以内置style的形式显示样式。

  • 命令行，生成bulid/index.js打包文件：webpack src/test.js bulid/index.js，效果如如下：

    效果图

  • 页面引入生成的目标文件，index.html：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack demo02</title>
</head>
<body>
    <div class="div1">div1</div>
    <script src="bulid/index.js"></script>
</body>
</html>

  • 浏览器访问index.html，效果如下：

    效果图

  • 其中，可以看到src/test.css中的样式直接以style的形式，加载到页面了。但是页面中并未引入样式，而是只引入了一个js文件而已。

    效果图

css相关loader

  • style-loader：将css样式以style的方式加载到脚本文件中，样式起作用。

  • css-loader：css文件可以直接作为模块加载到其他脚本文件中。

    • options.modules：true，将css文件作为局部变量。
      • css-loader：局部设置

  • postcss-loader：兼容性，加厂商前缀。 需要新建一个配置文件，postcss.config.js

    module.exports = {
  plugins: [
    require('autoprefixer')({               //加厂商前缀
        browsers: ['Android 2.3','Android >= 4','iOS >= 6',
          'Explorer >= 6','Chrome >= 20','Firefox >= 24','Opera >= 12'],
        cascade: true,                  //是否美化属性值 默认：true 
        remove:true                     //是否去掉不必要的前缀 默认：true 
    })
  ]
}

    ​

  • less-loader：将less/scss文件转为css文件

    • strictMath，是否严格匹配
    • noIeCompat，是否不兼容ie
    • 注意顺序，从后往前 其他文件类型类似，例如：sass-loader、json-loader、svg-online-loader、mocha-loader、babel-loader。

详见【demo03-6】

以上文章来自：黄卉 ， https://huanghui8030.github.io/webpack/init-css.html