执行 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. FL studio系列教程（十七）：FL Studio走带面板介绍

    FL Studio走带面板主要是用来控制播放.录音以及调整歌曲速度的,除此之外还可以用来选择样本剪辑.下面就来详细地看一下这部分菜单. 1.样本/歌曲模式 样本/歌曲模式主要是用来切换样本和歌曲两种模 ...

  2. Thread.start() ，它是怎么让线程启动的呢？

    作者:小傅哥 博客:https://bugstack.cn Github:https://github.com/fuzhengwei/CodeGuide/wiki 沉淀.分享.成长,让自己和他人都能有 ...

  3. [COCI2016-2017#1] Mag 结论证明

    结论:最多包含一个 \(2\),并且不在链的两端点. 证明:我们问题分成两个 \(\texttt{pass}\). \(\texttt{pass 1}\):\(\forall u,s.t.x_{u}\ ...

  4. 2017年第八届蓝桥杯【C++省赛B组】B、C、D、H 题解

    可能因为我使用暴力思维比较少,这场感觉难度不低. B. 等差素数列 #暴力 #枚举 题意 类似:\(7,37,67,97,127,157\) 这样完全由素数组成的等差数列,叫等差素数数列. 上边的数列 ...

  5. 这几个很实用的Linux命令，千万别忘记了！

  6. 关于 spring security 对用户名和密码的校验过程

    1.执行 AuthenticationManager 认证方法 authenticate(UsernamePasswordAuthenticationToken) 2.ProviderManager ...

  7. java面试复习重点：类的管理及常用工具，教你抓住面试的重点！

    java复习: 类的管理及常用工具类 包 写在程序文件的第一行 一个Java 源文件中只能声明一个包, 且声明语句只能作为源文件的第一条指令 导入类能导入非public类,但是不能用因为在其他包缺省的 ...

  8. moviepy音视频剪辑：使用autoTrack、manual_tracking+headblur实现半自动追踪人脸打马赛克

    一.引言 在<moviepy1.03音视频剪辑:使用manual_tracking和headblur实现追踪人脸打马赛克>介绍了使用手动跟踪跟踪人脸移动轨迹和使用headblur对人脸进行 ...

  9. PyQt（Python+Qt）学习随笔：containers容器类部件QStackedWidget堆叠窗口属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.堆叠窗口简介 StackedWidget堆叠窗口部件为一系列窗口部件的堆叠,对应类为QStack ...

  10. PyQt(Python+Qt)学习随笔：Qt Designer中主窗口对象的iconSize属性

    主窗口对象的iconSize属性保存的是主窗口中工具栏的图标尺寸,在没有设置时缺省是GUI图形界面样式中定义的工具栏的缺省大小. 注意:这个大小是工具栏图标的最小尺寸. 可以使用iconSize()返 ...