(12/24) css进阶：sass文件的打包和分离

2018-12-19 15:40

万码学堂

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:

 View Code

src/index.html:

 View Code

src/css/three.scss:

 View Code

src/entry.js（入口文件）：

 View Code

https://www.cnblogs.com/wfaceboss/p/10124229.html

关键字：

可能你正在寻找一家靠谱的IT培训机构，渴望突破职业瓶颈，找一份得体的工作。恰巧万码学堂正在寻找像你这样不甘平凡的追光者！我们拒绝纸上谈兵，直接参与真实开发流程！
现在行动，未来可期‌
立即拨打0532-85025005，预约免费职业规划咨询前20名咨询者赠送《2025高薪技术岗位白皮书》!
你不是在报名课程，而是在投资五年后的自己！

申请免费试听课程

50000+

5万行代码练就真实本领

17年

创办于2008年老牌培训机构

1000+

合作企业

98%

就业率

联系我们

电话咨询

0532-85025005

万码学堂2025年课程全面升级