执行 npm init 命令 生成 package.json 文件

在 webstorm 项目中局部安装 webpack（比如安装3.6.0版本）

npm install webpack@3.6.0 --save-dev 

在项目文件夹下新建 webpack.config.js 文件

在 webstorm  终端安装 css-loader , style-loader

npm install --save-dev css-loader

npm install --save-dev style-loader

安装之后在 webpack.config.js 文件中配置

最后执行 npm run build 打包

如果打包不成功，需要检查css-loader , style-loader 版本问题

 

webpack配置css-loader的更多相关文章

  1. webpack配置css浏览器前缀

    webpack打包时,css自动添加浏览器前缀.我们需要用到一个Loader:postcss-loader,和一个插件:autoprefixer 安装 npm i postcss-loader aut ...

  2. webpack配置css相关loader注意先后顺序

    一.问题描述 在webpack3中,引入animate.css失败. 二.问题分析 1.难道是入口main.js引用方式不对? import animate from 'animate.css' 2. ...

  3. webpack配置常用loader加载器

    webapck中使用loader的方法有三种 使用loader之前必须运行安装 : npm install --save-dev xxx-loader (1)通过CLI : 命令行中运行 webpac ...

  4. storybook配置之基本配置和webpack配置

    默认配置 Storybook有一个默认的适合(suits)大型项目开发的webpack配置,假如你使用react app,他类似于创建一个react app的配置,并经过调整(tweaked ),使其 ...

  5. webpack配置根据浏览器自动添加css前缀的loader

    1.安装 postcss-loader autoprefixer npm install postcss-loader autoprefixer --save-dev 2.配置webpack.conf ...

  6. Webpack的详细配置，[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  7. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  8. webpack导入css及各项loader

    1. webpack导入css 1) 下载相关的加载器 npm install style-loader css-loader -D 2)将index.css引入到mian.js中 import '. ...

  9. webpack css loader 使用

    备注:   接上面的项目 1. 添加css  main.css #app { text-align:center; } main.js require("./main.css"); ...

  10. webpack 配置之入门二（css 篇）

    在项目中我们通过 css 来美化页面,css 也成为了网站不可或缺的一部分,这章节主要介绍 webpack 处理 css 部分, 1.webpack 处理 css 在 webpack 中,我们通过 s ...

随机推荐

  1. 启动时出现错误：*** Warning - bad CRC or NAND

    前面转自:https://www.cnblogs.com/java20130726/archive/2012/06/15/3218570.html 在对NAND Flash烧写了bootstrap和U ...

  2. nginx学习sub_filter模块

    用户替换html中的字符 location / { root /opt/app/code/; random_index on; index index.html index.htm; sub_filt ...

  3. iOS 索引列 使用详解

    做苹果开发的朋友在地区列表可能会遇到在页面的右侧有一列类似与导航的索引列,这次有机会遇到了,细细研究了一下,原来没有想象中的高达上,只需要简单的几步就能做出自己的索引列.,关注我的博客的朋友可能会对这 ...

  4. 如何获取公网IP的mac地址

    如何获取远程IP的mac地址 思路分析 由于java本身没有相关的jar包进行获取,所以这里介绍从其他的方面进行入手和实践 使用的工具对比: tcpdump tshark pcap4j 都可以达到抓包 ...

  5. CSP.2020

    自闭jpg. 就说说 PJ 吧. TG炸的原因主要是因为PJ的炸裂以及T1--所以就直接分析根本原因了. # 参考补题链接 # # 推荐博客链接 # 0x00 考前一天晚上. 在LH巨佬家吃了饭,前往 ...

  6. Java复数的定义与描述

    1 //4.复数的定义与描述 2 package test; 3 4 import java.util.Scanner; 5 6 public class complex {//复数类 7 doubl ...

  7. Visual Studio 2019 升级16.8之后（升级.Net 5），RazorTagHelper任务意外失败

    vs2019升级16.8后,原来.net core 3.1的项目编译时出现了莫名其妙的错误: 1. "RazorTagHelper"任务意外失败 2. ...provide a v ...

  8. LeetCode 023 Merge k Sorted Lists

    题目要求:Merge k Sorted Lists Merge k sorted linked lists and return it as one sorted list. Analyze and ...

  9. 六. Vue CLI详解

    1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...

  10. JZOJ 11.14 提高B组反思

    JZOJ 11.14 提高B组反思 T1 题目虽然有点高大上,但是很容易懂 有一个\(d\)维空间,同时有一个长度为\(2n\)的操作序列,每个操作往某一维的正方向或反方向走一格,问多少种方案使得最后 ...