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

    即可正常使用。

  • 相关阅读:
    学习之路
    cordova配置icon和splash
    cardova-android打包
    数组元素最大差值的问题
    病毒攻击
    STL模板中List
    Direct3D API函数
    Direct3D雾化效果浅析
    Direct3D中顶点声明格式
    DirectX9.0 Direct3D Graphics Pipeline 总结
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7247312.html
Copyright © 2020-2023  润新知