zoukankan      html  css  js  c++  java
  • webpack的学习使用三

    webpack提供两个工具处理样式表 ,css-loader 和style-loader

    css-loader使你能够使用类似@import 和url()方法实现reqire()的功能,

    style-loader将所有计算后的样式加入页面中,二者组合在一起是你能够把样式表嵌入webpack打包后的js文件中。

    安装命令:npm install --save-dev style-loader css-loader回车

    配置项写法:

    module:{

      loaders:[

        {

          test:/.css$/,

          loader:"style!css"

        }

      ]

    }

     

    style和css写在一起的话用!分隔开,并且css在style后面。因为webpack执行的时候是从右向左。

    然后在app文件夹下新建index.css

    写入

    body{

      background:red;

    }

    main.js中引入,在里面添加:require('./index.css');

    这次我们把package.json中的ks换成start之后再执行命令:npm start回车

    然后打开index.html会发现背景颜色变红了。

  • 相关阅读:
    课堂训练
    测试用例
    学生空间测试
    图书管理系统为例5w1h
    风险分析
    关于选择方案的练习作业
    图书管理系统需求报告书
    电梯演说模板
    对于敏捷开发的见解
    课堂练习2
  • 原文地址:https://www.cnblogs.com/yupinghua/p/6295400.html
Copyright © 2011-2022 走看看