执行 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. Oracle数据库由dataguard备库引起的log file sync等待

    导读: 最近数据库经常出现会话阻塞的报警,过一会又会自动消失,昨天晚上恰好发生了一次,于是赶紧进行了查看,不看不知道,一看吓一跳,发现是由dataguard引起的log file sync等待.我们知 ...

  2. eslint报错： Unexpected any value in conditional. An explicit comparison or type cast is required

    原代码: record.modifiedTime? 修改后代码:typeof record.modifiedTime !== 'undefined' ?   (isAddType === true ? ...

  3. Docker Vs Podman

    翻译自 Chetansingh 2020年4月24日的博文<Docker Vs Podman> [1] 容器化的一场全新革命是从 Docker 开始的,Docker 的守护进程管理着所有的 ...

  4. FPGA PS2协议

    VerilogHDL那些事儿_建模篇(黑金FPGA开发板配套教程) 作者:akuei2 说明:参照该书将部分程序验证学习一遍 学习时间:2014年5月3号 主要收获: 1. 对PS2接口有初步了解: ...

  5. JZOJ2020年10月5日提高B组反思

    2020年10月5日提高B组反思 T1 考试的时候想简单了 觉得把跟没有攻占的点相连的边留下就可以了 没有考虑到最小 WA&RE 10 T2 没有思路 就直接从中间往后枚举分解处 蜜汁错误 W ...

  6. 对于Web开发最棒的22个Visual Studio Code插件

    翻译    原文作者:James Quick    原文地址:https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for- ...

  7. msql语句

    表相关语句: 创表相关 CREATE TABLE `Student`( `s_id` VARCHAR(20), `s_name` VARCHAR(20) NOT NULL DEFAULT '', `s ...

  8. flask基本使用

    一.flask安装以及启动 1.安装 pip install flask 2.开启第一个flask项目 新建文件HelloWord.py from flask import Flask app = F ...

  9. postman学习网址

    postman使用详解: http://gold.xitu.io/entry/57597a62a341310061337885 https://www.getpostman.com/docs/writ ...

  10. 百度网盘下载器：SpeedPan2.3.8

    SpeedPan是款百度网盘资源下载工具,下载速度还行(至少比百度网盘快太多了),支持登录百度账号,也支持免登录下载.官网免费版的取消分享了,我从油管上看到了这个软件,分享给大家. 天翼云:https ...