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

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 { width: 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

 

相关文章