执行 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. python搭建本地共享文件服务器

    1.安装python 去官网下载python最新版,然后安装配置好环境 2.运行命令 在终端上输入以下命令 python3 -m http.server 当你执行完这个命令的时候,你的电脑会监听 80 ...

  2. 牛客 2020.10.20 TG 前两题

    T1 GCD 数学水题... 对于每个数,如果这个数有两个及以上的质因数的话,它所有除 \(1\) 之外的因数求 \(GCD\) 的值一定为 \(1\).那么判断是否是质数或质数的次方即可(质数除 \ ...

  3. 【数据结构模版】可持久化线段树 && 主席树

    浙江集训Day4,从早8:00懵B到晚21:00,只搞懂了可持久化线段树以及主席树的板子.今天只能记个大概,以后详细完善讲解. 可持久化线段树指的是一种基于线段树的可回溯历史状态的数据结构.我们想要保 ...

  4. C语言新手入门

    include<stdio.h> int main() { //输入一个数 输出它的反序列 c int a,b=0; scanf("%d",&a);//输入一个 ...

  5. LeetCode 024 Swap Nodes in Pairs

    题目描述:Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For ...

  6. 我与PHP，ULM和Vue.js不得不说的故事（我与PHP白月光的那些事儿之第三年的见异思迁番外篇）

    关于PHP的认知 -----恍惚间眸眼像极了一位故人 第一年遇见,那时的它还稚嫩懵懂.像白纸一样的脸,极容易读懂.于是放荡不羁,不放真心.稍微用心,它便能高兴好久.初识它时它叫C语言,浅尝却不觉其难过 ...

  7. java47

    1. 1.List集合根据角标获取元素 import java.util.ArrayList; import java.util.List; public class List集合 { @Suppre ...

  8. python 二维数组赋值问题

    [[]]是一个含有一个空列表元素的列表,所以[[]]*3表示3个指向这个空列表元素的引用, 修改任何一个元素都会改变整个列表 所以需要用另外一种方式进行创建多维数组,以免浅拷贝 >>> ...

  9. CentOS7系统tab命令补全

    在新安装的CentOS7系统中,如果没有安装命令补全的话,在systemctl管理服务的时候就没法用tab来自动补全,因此在安装完系统后,我们要再安装命令补全这个软件: yum -y install ...

  10. C#：终于有人把 ValueTask、IValueTaskSource、ManualResetValueTaskSourceCore 说清楚了！

    目录 1,可用版本与参考资料 2,ValueTask 和 Task 3,编译器如何编译 4,ValueTask 有什么优势 5,ValueTask 创建异步任务 6,IValueTaskSource ...