zoukankan      html  css  js  c++  java
  • webpack(四)处理 csslesssass 样式

    (一)

      处理普通的.css 文件,需要安装 css-loader,style-loader

               .less 文件,需要安装 less-loader

             .sass 文件,需安装  less-loader

    npm install --save-dev css-loader
    npm install --save-dev css-loader
    npm install less-loader --save-dev

    (二)

      在项目中,我们会遇到 不同浏览器,前缀不同。比如 display: flex ,在IE以及谷歌下前缀是不同的,

      这时候,我们需要 postcss 这样的插件

    npm install postcss-loader --save-dev
    npm install autoprefixer --save-dev

       安装好相关loader后,我们需要在webpack.config.js 中 加入相关配置代码,如下

    var htmlWebpackPlugin = require('html-webpack-plugin');
    var path = require('path');
    console.log(__dirname);
    module.exports = {
        /*context: __dirname,*/
        entry: './src/app.js',
    
        output: {
            path: './dist',
            filename: 'js/[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js
        },
        module: {
            loaders: [
                {
                    test: /.css$/, //正则表达式,匹配.css文件
                    loader: 'style!css?importLoaders=1!postcss'  //处理顺序 从右到左
                    // ?importLoaders=1 表示 引入嵌入的 css文件也会按照postcss这样自动添加前缀
    }, { test: /.less$/, loader: 'style!css!postcss!less' } ], rules: [{ test: /.(css|scss|less)$/, loader:"style-loader!css-loader?importLoaders=1!postcss-loader" //由于webpack2.X 版本对post-css书写方式的改变
                                                  //需要新添加 postcss.config.js
    }] }, plugins: [ new htmlWebpackPlugin({ filename: 'index.html', //通过模板生成的文件名 template: 'index.html',//模板路径 inject: 'body' //是否自动在模板文件添加 自动生成的js文件链接 }) ] };

      postcss.config.js 代码如下

    module.exports = {
        plugins: [
            require('autoprefixer')({
                browsers: 'last 5 version' //前五种浏览器版本
            })
        ]
    };

      

    import layer from './components/layer/layer.js';
    import './css/common.css';
    
    const App = function () {
        console.log(layer);
    }
    
    new App();
    app.js

        layer.js

    import './layer.less';
    
    function layer(){
        return{
            name:'layer',
            tpl:'tpl'
    }; } export
    default layer;

     

    //layer.less
    .layer{
      width:600px;
      height: 200px;
      border: 1px solid yellow;
    }
    
    //common.css
    @import "flex.css";
    html{
        background-color: red;
    }
    
    ul,li{
        padding:0;
        margin:0;
        list-style:none;
    }
    .styleFlex {
        display: flex;
    }
    
    //flex.css
    .flexFlex {
        display: flex;
    }
    相关css

      使用webpack 编译后,可以查看,相关css以及被编译在index.html,前缀css 自动完成。

      

  • 相关阅读:
    33.数组声明方式(var构造函数) 、检测数组类型、数组的属性(封装好的就一个length)、数组的方法
    31.this指向(写出调用链,找最近对象) this的默认绑定 隐式绑定 显示绑定(call(绑定对象) apply(绑定对象) 当括号内没放绑定对象的时候恢复默认绑定) bind
    31.
    30.函数作用域链 (GO AO 也叫词法作用域链)、 调用栈、调用栈涉及this绑定
    29.包装类(构造函数) 包装类作用及调用栈
    916. Word Subsets
    246. Strobogrammatic Number
    445. Add Two Numbers II
    2. Add Two Numbers
    341. Flatten Nested List Iterator
  • 原文地址:https://www.cnblogs.com/xianrongbin/p/6486868.html
Copyright © 2011-2022 走看看