(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 {
   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
    }
}

View Code

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>

View Code

src/css/three.scss:

$nav-color: #FFF;

#sass_part {
   100px;
  height:100px;
  background-color: $nav-color;
  color:#000 ;
  margin: 50px;
}

View Code

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';

View Code