怎么打包与分离sass

本文小编为大家详细介绍“怎么打包与分离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的区块

　　<divid="sassLearn"></div>

　　Sass文件的编写：在src/css里面新建一个sassLe.scss文件

　　$nav-color:#fff;

　　#sassLearn

　　{

　　$width:100%;

　　width:$width;

　　height:30px;

　　background-color:$nav-color

　　;}

　　在src/entry.js里面引入sass

　　importsassfrom&lsquo;./css/sassLe.scss&rsquo;

　　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”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。