专栏首页wfaceboss(12/24) css进阶:sass文件的打包和分离

(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 条评论
登录 后参与评论

相关文章

  • (8/24) 图片跳坑大战--css中的图片处理

    前言:此节的开展是在上一节的基础上进行的,(每一节都是从无到有编写关于此节的知识),最后会附上相关完整代码。上一节

    wfaceboss
  • (11/24) css进阶:Less文件的打包和分离

    写在前面:在前面我们对css打包和分离进行了描述。此节我们开始学习如何对less文件进行打包和分离。

    wfaceboss
  • (5/24) 模块化:实现快速CSS文件打包

    写在前面:为了兼容,此处的webpack版本为3.6.0、webpack-dev-server版本为2.9.7、css-loader版本为2.0.0、style...

    wfaceboss
  • 3-3 使用loader打包静态资源(样式篇上)

    在制作网页时,我们必不可少地会使用css。那么webpack是如何打包css文件的呢?

    love丁酥酥
  • 聊聊maxwell的Scripting

    maxwell-1.25.1/src/main/java/com/zendesk/maxwell/scripting/Scripting.java

    codecraft
  • 聊聊maxwell的Scripting

    maxwell-1.25.1/src/main/java/com/zendesk/maxwell/scripting/Scripting.java

    codecraft
  • 线上与线下简单相加不是新零售,有新体验的才是新零售

    孟永辉
  • 基于“牛顿冷却定律”的机器学习算法

    alexqdjay
  • 让你不会装双系统也能用上双系统

    这个软件是在公司看到领导在用,才知道原来Windows,已经支持Linux系统这么强大了。使用的名字是WSL。我们也可以百度下这个怎么使用。

    用户2196435
  • 7、reset.css的引入及1px边框问题的解决

    因为不同的浏览器默认的样式不同,所以在着手项目开始前,我们需要引入reset.css,将所有html标签的默认样式统一化。我这里推荐一个下载reset.css的...

    Ewall

扫码关注云+社区

领取腾讯云代金券