在Webpack构建的项目中，使用Sass的Compass库可以快速编写代码的样式。下面将介绍在Webpack中引入Compass。
本文内容如下：
- 项目环境配置
- 使用Compass
- 运行项目
- 参考网站
1.项目环境配置
-
设置项目环境。由于是React项目，在全局环境中安装:create-react-app ，然后运行:
create-react-app my-app //创建一个my-app的项目 -
安装项目所有的依赖包，运行：
yarn install
-
对项目配置，要将react-scripts的所有脚本和配置弹出到项目根目录中，运行：
npm run eject
上面的错误中，提示缺少了"chardet"包，是某个包依赖这个包，才产生这种错误，下面安装所有缺少的所有包：
cnpm i --save chardet convert-source-map doctrine es-abstract webpack-dev-middleware webpack-sources
再运行：
npm run eject
2.使用Compass
-
安装编译Scss文件的编辑器。安装sass-loader和node-sass到项目中，运行：
cnpm i --save sass-loader node-sass -
安装Sass的第三方Compass库。安装 compass-mixins包，运行：
cnpm i --save compass-mixins -
修改webpack配置。在根目录config/webpack.config.dev.js文件中，添加如下内容：
{
test: /\.scss$/,
use: [
require.resolve("style-loader"),
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1
}
},
{
loader:
"sass-loader?url=false,outputStyle=expanded&includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib')"
}
],
},
- 编写一个测试文件。将编写一个Scss文件，并保存到src/button.scss，如下所示：
@import '~compass-mixins/lib/compass/_css3.scss';
$primary-color: #1890ff;
.button{
width: 100px;
height: 47px;
line-height: 47px;
text-align: center;
font-size: 18px;
cursor: pointer;
&:hover{
color: $primary-color;
background-color: tint($primary-color, 50%);
}
}
- 将button.scss引入到App组件。在src/App.js的头部中，加入如下所示内容：
import './button.scss';
3.运行项目
-
启动项目。在CMD中，启动项目，运行：
npm start //如果运行时报错提示缺少ini,安装就行 -
查看源码。在浏览器的地址栏输入：
view-source:http://localhost:3000/static/js/bundle.js -
查找button.scss。按Ctrl+F后，输入./src/button.scss，结果如下所示：
从上面源码中分析，webpack通过文件路径+名称形式来划分每个独立的文件，你会发现好混乱。并且它使用Babel对JavaScript代码转换为兼容模式。继续分析源码(太长了，不上传了）可以看到Webpack对Compass的引用。
-
查看项目。 在浏览器的地址栏输入：http://localhost:3000/，当'click me'按键获取到鼠标时，颜色发生了变化，说明成功引入Compass库。
-
项目源码。点击这里，可以查看源码，并下载。
4.参考网站
- 介绍compass-mixins：aHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9xdWVzdGlvbnMvMzI5MjU1NzAvaG93LXRvLWNvbmZpZ3VyZS13ZWJwYWNrLXRvLXVzZS1jb21wYXNzLWluLW15LXByb2plY3Q=
- compass库的Api搜索：
aHR0cDovL2NvbXBhc3Mtc3R5bGUub3JnL3NlYXJjaC8=
网友评论