zoukankan      html  css  js  c++  java
  • 常用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']
    }

    即可正常使用。

  • 相关阅读:
    VS2010/MFC编程入门之四(MFC应用程序框架分析)
    VS2010/MFC编程入门之三(VS2010应用程序工程中文件的组成结构)
    shell脚本学习一
    docker安装rabbitmq
    docker安装activemq
    docker搭建数据库主从复制
    在docker容器中安装vim命令进行编辑文件
    docker的常用操作
    docker上安装eslaticsearch
    centos7上面关闭防火墙
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7247312.html
Copyright © 2011-2022 走看看