(12/24) css进阶：sass文件的打包和分离
1.安装sass打包的loader
这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader，（也可以使用cnpm安装）
因为sass-loader依赖于node-sass，所以需要先安装node-sass
1.1 node-sass
npm install --save-dev node-sass
1.2 sass-loader
npm install --save-dev sass-loader
注意：在用npm安装时，这个loader很容易安装失败，最好使用cnpm来进行安装。如果你安装一直报错，最好是把node_modules文件夹删除后，再重新安装。
2.配置可直接进行SASS文件分离的loader
若不需要sass文件分离，参考上一节的配置方式
const extractTextPlugin = require("extract-text-webpack-plugin");
{
test: /\.scss$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
}
extract-text-webpack-plugin分离插件的相关使用。
3.新建文件
3.1 scss文件建立
注意这里建立的文件格式是scss格式的。
在src/css目录下新建three.scss文件，内容为：
$nav-color: #FFF;
#sass_part {
width: 100px;
height:100px;
background-color: $nav-color;
color:#000 ;
margin: 50px
;
}
3.2 添加标签
在src目录下的index.html文件中新增，如下：
<div id="sass_part">sass</div>
4. 在src目录下的entry.js中引入scss文件
import less from './css/three.scss'
5.打包
使用webpack命令进行打包。
webpack
结果打包到了index.css中。
6.启动服务
使用命令npm run server 启动服务。
npm run server
效果为：
相关源代码：
webpack.config.js:
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={
publicPath:"http://localhost:1818/"
}
module.exports={
//入口文件的配置项
entry:{
entry:'./src/entry.js',
//这里我们又引入了一个入口文件
entry2:'./src/entry2.js',
},
//出口文件的配置项
output:{
//输出的路径，用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'[name].js',
publicPath: website.publicPath
},
//模块：例如解读CSS,图片如何转换，压缩
module:{
rules: [
//针对.css的处理配置
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
//针对.less的处理配置
{
test: /\.less$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"//extract默认行为先使用css-loader编译css，如果一切顺利的话，结束之后把css导出到规定的文件去。但是如果编译过程中出现了错误，则继续使用vue-style-loader处理css
})
},
//针对scss的处理配置
{
test: /\.scss$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test:/\.(png|jpg|gif)/,
use:[{
loader:'url-loader',
options:{
limit:50,
outputPath:'images/'//图片打包到images下
}
}
]
},
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
]
},
//插件，用于生产模版和各项功能
plugins:[
// new uglify(),
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
}),
new extractTextPlugin("css/index.css")
],
//配置webpack开发服务功能
devServer:{
contentBase:path.resolve(__dirname,'dist'), //绝对路径
host:'localhost',
compress:true,
port:1818
}
}
src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div>
<div id="sass_part">sass</div>
<div id="less_part">less</div> <img src="data:images/wfbin.png"/></div>
<div id="img"></div>
<div id="title"></div>
</body>
</html>
src/css/three.scss:
$nav-color: #FFF;
#sass_part {
width: 100px;
height:100px;
background-color: $nav-color;
color:#000 ;
margin: 50px;
}
src/entry.js（入口文件）：
import css from './css/index.css'
import less from './css/black.less'
import less from './css/three.scss'
document.getElementById('title').innerHTML='Hello Webpack';
(12/24) css进阶：sass文件的打包和分离的更多相关文章
- webpack快速入门——CSS进阶：SASS文件的打包和分离
1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...
- webpack快速入门——CSS进阶，Less文件的打包和分离
1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...
- (11/24) css进阶：Less文件的打包和分离
写在前面:在前面我们对css打包和分离进行了描述.此节我们开始学习如何对less文件进行打包和分离. Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性, ...
- (14/24) css进阶：（入门）去除冗余的css
在平时的项目开发中,我们会引入一些框架,比如:Bootstrap,但是在项目中通常我们只使用它的一小部分,还有部分是冗余的.更有甚有时候需求更改,带来DOM结构的更改,这时候我们可能无暇关注CSS样式 ...
- (13/24) css进阶：自动处理css3属性前缀
什么是属性前缀 为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 例如: transition: width ...
- webpack快速入门——CSS进阶：自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- webpack快速入门——CSS进阶：消除未使用的CSS
使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...
- webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- CSS进阶之SASS入门指南
CSS进阶之SASS入门指南 随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说 ...
随机推荐
- BZOJ3230: 相似子串【后缀数组】
Description Input 输入第1行,包含3个整数N,Q.Q代表询问组数. 第2行是字符串S. 接下来Q行,每行两个整数i和j.(1≤i≤j). Output 输出共Q行,每行一个数表示每组 ...
- POJ 2312：Battle City（BFS）
Battle City Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9885 Accepted: 3285 Descr ...
- （6）time&datetime(时间模块)
什么是时间模块 就是处理时间相关的功能 如用户注册的时间.统计程序运行的时间等 time 模块 计算机中有三种时间 1.时间戳 从1970年到今天,这个时间段中间经历的秒数 获取时间戳:time.t ...
- 有锁Iphone 3GS 6.0.1 降级刷到4.2.1 完美越狱+解锁
2012-12-20 百度空间所写 前言:由于之前的3GS升级到6.0.1后会有重启之后无法打电话的情况,同学觉得这样很烦,搞得手机不像个手机了.但是这也是没办法的,毕竟是不完美越狱加软解锁的.于是, ...
- 字符串匹配--扩展KMP模板
对于一个字符串 s 以及子串 t ,扩展KMP可以用来求 t 与 s 的每个子串的最长公共前缀 ext [ i ],当然,如果有某个 ext 值等于 t 串的长度 lent ,那么就说明从其对应的 i ...
- CUDA H624解码性能测试
测试环境: Cpu: Inter(R)Core(TM)i7-4790 CPU @3.6GHZ GPU: NVIDIA GeForce GTX960* 1 操作系统: W ...
- streamsets 3.5 的一些新功能
streamsets 3.5 有了一些新的特性以及增强,总之是越来越方便了,详细的可以 查看官方说明,以下简单例举一些比较有意义的. origins 新的pulsar 消费origin jdbc 多表 ...
- SQL——ROW_NUMBER
版权声明:欢迎转载,请注明出处 https://blog.csdn.net/suneqing/article/details/30250193 语法: ROW_NUMBER() OVER(PARTIT ...
- Spring boot 使用的注解有哪些？
Spring boot 使用的注解有哪些? 注解 作用 @SpringBootApplication 等价于 @Configuration + @EnableAutoConfiguration + @ ...
- jQuery如何取得HiddenField值(转)
<f:HiddenField runat="server" ID="cat_id" Text="ssss"/> var strD ...