前言：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‘./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打开浏览器查看效果









本文转载自中文网