关于webpack编译scss文件
css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录就是我们网站需要引用的目录.
1 var webpack = require('webpack'); 2 var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin'); 4 var extractCss = new ExtractTextWebpackPlugin("css/[name].css");//这里的参数是配置编译后的css路径和文件名,相对于output里的path选项 5 var path = require('path'); 6 module.exports = { 7 resolve:{ 8 extentions:["",".scss"] 9 }, 10 entry:{ 11 main:__dirname + '/app/main.js', 12 index:__dirname + '/app/index.js' 13 }, 14 output:{ 15 path:__dirname + '/public', //通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面 16 filename:'/js/[name].js', //编译生成的js文件存放到根目录下面的js目录下面,如果js目录不存在则自动创建 17 }, 18 module:{ 19 loaders:[ 20 {test:/\.scss$/,loader:extractCss.extract(['css','sass'])} 21 ] 22 }, 23 sassLoader:{ 24 includePaths:[path.resolve(__dirname,'./app/css')] 25 }, 26 plugins:[ 27 new HtmlWebpackPlugin({title:'custom title2',template:__dirname + '/public/tempIndex.html'}), 28 extractCss 29 ] 30 }
Note:new ExtractTextWebpackPlugin("css/[name].css"),如果用了[name]占位符的形式,只编译引用了scss文件的入口文件,且生成的css文件名与入口文件对应。
如果有多个入口文件都引入了同一个scss文件,且entry属性配置了vendor对象,则生成一个vendor.css文件,这个vendor.css文件对应的源码是入口文件共同引用的scss文件(webpack.optimize.CommonsChunkPlugin不仅能提取公共的js文件还能提取公共的css文件),如果没有配置vendor则分别生成多个与入口文件同名的css文件。
如果多个入口文件引用的是不同的scss文件,不管entry属性有没有配置vendor对象,都生成多个与入口文件对应的同名css文件。
通常情况下都会使用[name]占位符,如果只有一个入口节点引用了scss文件且只引用了一个scss文件,则可以不用占位符,可以指定任意名称。
关于webpack编译scss文件相关推荐
- Compass 编译.scss文件的问题
compass 命令编译scss文件存在一个问题: 不能对"_"下划线开头的scss文件名称的文件进行编译.将"_"去掉就可以啦 转载于:https://www ...
- sass webpack_如何在Visual Studio和Webpack中编译Sass文件
sass webpack Sass is a very popular CSS pre-processor. The intent of this tutorial is to show you ho ...
- webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
- webstorm和intellij idea下如何自动编译sass和scss文件
前言 学过css的人都知道,css他不是一个编程语言.虽然你可以用css去写网页样式,但是你却没法使用它进行编程.所以有一句话来描述css我个人觉得再合适不过了,"CSS基本上是设计师的工具 ...
- webpack 入口文件 php,如何实现webpack多入口文件打包配置
本篇文章主要介绍了webpack多入口文件页面打包配置详解,现在分享给大家,也给大家做个参考. 大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也 ...
- vue-cli脚手架中webpack配置基础文件详解
一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮 ...
- vue中webpack编译打包使用之Vue知识点归纳(十一)
本文中将描述 webpack 简述 webpack 项目的初始化配置 webpack 打包运行一个 vue 项目 1 什么是webpack,到底需要解决什么问题 近几年前端的快速发展,前端已不是简单的 ...
- demo12 webpack 处理 scss
1.如何处理 scss sass-loader > css-loader > style-loader (以 <style> 标签形式添加到 html 中) 或 sass-lo ...
- css文件如何设置scss,在SCSS文件中导入常规CSS文件?
回答(14) 3 years ago 截至撰写本文时,看起来这是未实现的: https://github.com/sass/sass/issues/193 对于libsass(C / C实现),导入对 ...
最新文章
- 【bzoj5016】[Snoi2017]一个简单的询问 莫队算法
- 【全栈项目上线(vue+node+mongodb)】06.nodejs服务上线(生产环境前后分离的vue项目中怎么解决跨域问题)...
- Python小游戏(24点小游戏)
- LinkedHashMap实现LRU缓存算法
- 2021-04-08
- 前端 crypto-js aes 加解密
- sdk怎么用_PLC不支持OPC UA怎么办?别问了看完你就懂了
- react+redux+antd图书管理系统学习
- Linux异步管道多线程速率测试-原始数据
- python中统计数据的总和_Python 数据的累加与统计的示例代码
- node.js 初体验(转载)
- 11-6-线程的概念
- Python分析与处理---利用Python进行学生成绩分析
- 计算机桌面图标变大怎么解决,小编教你电脑桌面图标变大了怎么办
- Python 查看微信撤回消息
- 「磨金石教育学员插画作业」什么是日系插画?
- python键盘控制_python如何直接控制鼠标键盘
- 榨干运营成本:一亿之后再省两亿
- CMake中file的使用
- 解决获取微信用户信息 48001错误
热门文章
- oracle 表收缩,Oracle 收缩表大小 Oracle Shrink Table
- 乘积取中法matlab,迭代取中法、乘同余法及混合同余法产生随机数方法
- uniapp 如何给搜索框设值_uni-app 顶部配置搜索框和左右图标
- 外联样式表添加到html中,CSS联样式表之内联式、外联式和嵌入式
- android顶部标题app_name,如何写一个app通用的title
- python源码_Python爬虫入门之获取网页源码
- python画一个祝福别人生日快乐_还在送生日贺卡?试试为家人朋友创作一个生日动画短视频吧...
- python编程从入门到实战16章x轴刻度_PYTHON编程:从入门到实践之数据可视化
- 修改鼠标手形 闪烁 在填写文字内容后也一直在闪烁
- 在线制作车牌效果图_厦门车牌识别系统生产厂家直销