本文小编为大家详细介绍“怎么打包与分离sass”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么打包与分离sass”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
成都创新互联公司服务项目包括宁陕网站建设、宁陕网站制作、宁陕网页制作以及宁陕网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，宁陕网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到宁陕省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
前言：package.json是npm中的包管理配置文件，webpack.config.js是webpack默认的配置文件，webpack.plugin.js则是我为了使webpack.config.js看起来更清晰而提取出的一些配置内容，顾名思义是提取出了插件的配置。
node_modules是执行npminstall后依赖包的安装目录。
打包和分离sass
在项目目录下安装两个包:
npminstall–save-devnode-sass
npminstall–save-devsass-loader
如果安装不成功，需要把node_modules目录删除，重新npminstall安装该目录后，再次安装这两个包
编写loader配置:
loader的配置要有先后顺序
{
test:/\.scss$/,
use:[{
loader:"style-loader"//createsstylenodesfromJSstrings},
{
loader:"css-loader"//translatesCSSintoCommonJS},
{
loader:"sass-loader"//compilesSasstoCSS}]}
src/index.html中插入一层关于sass的区块
Sass文件的编写：在src/css里面新建一个sassLe.scss文件
$nav-color:#fff;
#sassLearn
{
$width:100%;
width:$width;
height:30px;
background-color:$nav-color
;}
在src/entry.js里面引入sass
importsassfrom‘./css/sassLe.scss’
webpack后npmrunserver查看效果（但是此时#sassLearn是打包到entry.js当中）
修改webpack-config.js里面的sass配置中的use
use:extractTextPlugin.extract({
use:[{
loader:'css-loader'},
{
loader:'sass-loader'
}],
fallback:'style-loader'
})
删除dist文件夹webpack进行打包，查看dist/css/index.css里有#sassLearn的样式设置（即把sass和js文件已经分离）
npmrunserver打开浏览器查看效果
读到这里，这篇“怎么打包与分离sass”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。
重庆分公司
重庆分公司
