Css 在 Webpack 中使用 Sass 第三方库

kkzz · 2018年01月26日 · 892 次阅读
本帖已被设为精华帖!

  在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的头部中,加入如下所示内容:

```javascript
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=
共收到 0 条回复
es6china 将本帖设为了精华贴 01月26日 23:02
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册