(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="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';

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

一个最简单的WebSocket hello world demo

https://github.com/i042416/KnowlegeRepository/blob/master/practice/nodejs/server...

43040
来自专栏运维经验分享

Prometheus+Grafana监控MySQL

$ yum install go $  go version go1.6.3 linux/amd64

31130
来自专栏Core Net

ASP.NET Core 2.2 十九. 你扔过来个json,我怎么接

  前文说道了Action的激活,这里有个关键的操作就是Action参数的映射与模型绑定,这里即涉及到简单的string、int等类型,也包含Json等复杂类型...

20030
来自专栏工作专用1

Windows Server中的故障转移群集的实现机制

Windows服务器故障转移集群(Windows Server Failover Cluster,简称WSFC)使用仲裁投票(Quorum Voting)决定集...

16610
来自专栏Fundebug

JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in VS for/of

我们有多种方法来遍历 JavaScript 的数组或者对象,而它们之间的区别非常让人疑惑。Airbnb 编码风格禁止使用 for/in 与 for/of,你知道...

16840
来自专栏前端杂货铺

一步步学会用docker部署应用(nodejs版)

docker是一种虚拟化技术,可以在内核层隔离资源。因此对于上层应用而言,采用docker技术可以达到类似于虚拟机的沙盒环境。这大大简化了应用部署,让运维人员无...

23030
来自专栏运维经验分享

在执行gem: redis requires Ruby version >= 2.2.2

/usr/local/rvm  /usr/local/rvm/src/rvm  /usr/local/rvm/src/rvm/bin/rvm  /usr/...

22120
来自专栏CSDN技术头条

开发桌面应用,自然用 Electron !

可能很多读者会感到奇怪,本来是说 Electron,为什么一开始要提到 Node.js 和 JavaScript 呢?它们是什么关系呢?别急,听我慢慢道来。

64820
来自专栏运维经验分享

nohup和&后台运行,进程查看及终止 原

  无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup.out 文件中。

17330
来自专栏大史住在大前端

KOA中间件的基本运作原理

在中间件系统的实现上,KOA中间件通过async/await来在不同中间件之间交换控制权,工作机制和栈结构非常相似,建议结合《express中间件系统的基本实现...

14730

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励