在Webpack中使用Sass第三方库

  在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=