zoukankan      html  css  js  c++  java
  • loader 配置处理 .css 文件 .less文件 .scss文件

    main.js

    //使用 import 语法导入css样式表
    import './css/index.css'
    //注意:webpack默认只能打包处理js文件,无法处理其他的非js类型文件,如果要处理,需要手动安装一写合适的第三方 loader 加载器 //1.如果要打包处理css文件,需要安装cnpm i style-loader css-loader -D //2.打开webpack.config.js这个配置文件,在里面新增一个配置节点,叫做module,它是一个对象,在这个module对象身上,有个rules属性,这个rules属性是个数组;这个数组中存放了所有对第三方文件的匹配和处理规则;

    运行npm run dev 发现 src 下的 css 文件夹中的 .css  .less  .scss文件都无法被webpack识别打包

    .css

    cnpm i style-loader css-loader -D

     .less

    cnpm i less-loader -D
    cnpm i less -D  //内部依赖,不需要放入匹配规则中

    .scss

    cnpm i sass-loader -D
    cnpm i node-sass -D  //内部依赖,不需要放入匹配规则中

    webpack.config.js

    const path = require('path');
    
    //这个配置文件,起始是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象
    module.exports = {
      entry: './src/main.js',     //入口,表示要使用webpack打包哪个文件
      output: {
        filename: 'bundle.js',  //这里是输出文件的名称
        path: path.resolve(__dirname, 'dist')   //指定打包好的文件输出到了那个目录中去
      },
    plugins:[],
    module:{//这个节点,用于配置所有第三方模块加载器 rules:[//所有第三方模块的匹配规则 { test:/.css$/,use:['style-loader','css-loader']}, //配置处理.css文件的第三方loader规则
         { test:/.less$/,use:['style-loader','css-loader','less-loader']}, //配置处理.css文件的第三方loader规则
         { test:/.scss$/,use:['style-loader','css-loader','sass-loader']}, //配置处理.css文件的第三方loader规则
        ]
    } };

    配置成功后,运行 npm run dev,页面已经出现了样式,此时说明 样式文件打包成功了

    注意:webpack4.0打包的样式文件必须存在,否则配置完成之后会报错

  • 相关阅读:
    [转]SQL Server中的执行引擎入门
    [转]C# 导入导出Excel通用类(SamWang)
    【转】TSQL查询进阶—理解SQL Server中的锁
    [转载]使用分页方式读取超大文件的性能试验
    【总结】读《WEB三层架构的束缚》后的感想
    【转】jQuery使用 $.post提交json数据
    【原创】关于索引的总结
    【转】.net 匿名函数的变化
    【转】List<T>的Sort,Find,Exists等的使用
    【转】Http中Get/Post请求区别
  • 原文地址:https://www.cnblogs.com/wuaidongfang/p/10385415.html
Copyright © 2011-2022 走看看