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‘;
(12/24) css进阶：sass文件的打包和分离
原文地址：https://www.cnblogs.com/wfaceboss/p/10124229.html