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

    即可正常使用。

  • 相关阅读:
    序列点,相关知识
    6.13 关键概念
    6.9 如何选择循环
    6.8 出口条件循环:do while
    6.7 逗号运算符
    6.6 其他赋值运算符:+=、-=、*=、/=、%=
    6.3.4 新的_Bool类型
    Oracle的表导入到PowerDesigner
    PowerDesigner连接Oracle数据库
    加了日期条件后查询结果慢了100倍
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7247312.html
Copyright © 2011-2022 走看看