执行 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. mac实用软件推荐 mac好用的软件

    终于入手了梦寐以求的苹果电脑,但却发现其操作系统与Windows大相径庭!不会使用怎么办?不用担心,我们可以借助软件的力量.一款实用的Mac软件不仅能够使你的工作效率显著提高,同时它还能帮助你更快地熟 ...

  2. api-hook，更轻量的接口测试工具

    前言 在网站的开发过程中,接口联调和测试是至关重要的一环,其直接影响产品的核心价值,而目前也有许多技术方案和工具加持,让我们的开发测试工作更加便捷.接口作为数据传输的重要载体,数据格式和内容具有多样性 ...

  3. E. Number of Simple Paths 题解(思维)

    题目链接 题目大意 给你n个点(\(\sum n<=2e5\)),n条边,求有多少条路径 题目思路 要明白任意两点的路径只能是1条或者2条 先topo找环(双向边也是可以找的) 然后把环上的每个 ...

  4. Elasticsearch7.7.0安装

    安装 下载解压 elasticsearch-7.7.0-linux-x86_64.tar.gz tar -zxvf elasticsearch-7.7.0-linux-x86_64.tar.gz -C ...

  5. Mybatis【2】-- 多个mapper文件以及namespace作用

    多个mapper文件以及namespace作用 要是多个mapper文件的时候怎么处理,namespace又是干什么用的呢 首先我们来看创建数据库语句: #创建数据库 CREATE DATABASE ...

  6. uniapp分包(详尽版)

    PS:本文是笔者对基于uniapp的一小程序项目进行分包后的复盘文档,不足之处请多多指教. 一:分包相关概念 本质上是改变项目的路由以及优化项目各个模块的启动时间的一种优化技术. 主包与分包的概念 1 ...

  7. 小米死磕硬核技术，将扩招5000名工程师，多个领域会使用到C++

    小米MIDC大会2020在北京小米科技园召开,小米集团创始人.集团董事长兼CEO雷军宣布:"重视人才队伍的建设.人才是创新之源,提升技术实力的第一步,就是聚拢最顶尖的人才.小米2021年将在 ...

  8. Arcgis基于高程（DEM）计算地形湿度指数（TWI），以及坡度（Slope）度单位转换为弧度

    以30m*30m分辨率的图层为例 一.基于表面工具箱Surface计算Slope 1.如下图输入图层DEM,输出Slope 2.单位转换: Scale_slope=Slope*pi/180 二.基于水 ...

  9. 【Usaco 2009 Gold 】JZOJ2020年9月19日提高B组T2 电视游戏问题

    [Usaco 2009 Gold ]JZOJ2020年9月19日提高B组T2 电视游戏问题 题目 Description 农夫约翰的奶牛们游戏成瘾!本来FJ是想要按照陶叫兽的做法拿她们去电击戒瘾的,可 ...

  10. Windows下django项目部署 通过Apache2.4+mod_wsgi

    经过几天踩坑,记录在Windows10下通过Apache2.4部署Django项目的过程 运行环境: 先说下环境,怎么安装倒是其次的,版本很重要,我是根据mod_wsgi的版本要求下载的各个版本(py ...