Next.js + TS 从零开始写一个前端导航页面（四、添加 sass 支持）

时间：

分类：

nextjs

字数：

539 字

时长：

大约需要 2 分钟

次数：

0 人阅读

虽然 next.js 默认支持 styled-jsx ，不过在折腾的路上一去不回，还是弄了一个 sass 来玩。

安装依赖

1
$ npm install --save-dev @zeit/next-sass node-sass

注意： node-sass 由于墙的关系，多半会安装失败，一般会失败在 Downloading binary from xxx/v4.14.0/win32-x64-64_binding.node 这儿。
如果出现此问题建议先在目录下新增 .npmrc 文件，设置 npm 命令使用淘宝镜像地址。

1
2
3
4
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org

当然，也可以临时使用淘宝镜像安装，如下：

1
$ npm install --save-dev @zeit/next-sass node-sass --registry=https://registry.npm.taobao.org

修改配置

根目录 next.config.js :

1
2
const withSass = require('@zeit/next-sass');
module.exports = withSass({});

如此，已经可以使用 sass 或者 scss 撸代码了。

既然使用了 sass 配置文件必不可少啊，不能在每个文件去引入配置文件吧，公用文件必须加上！

还必须撸一个 js 与 sass 公用文件来处理 js 和 sass 公用变量情况。

sass 公用配置文件

继续修改next.config.js :

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const path = require('path');
const withSass = require('@zeit/next-sass');
// js 与 sass 公用变量
const styleVariables = require(path.resolve(__dirname, 'sass/variables.js'));

module.exports = withSass({
  sassLoaderOptions: {
    prependData: `
      ${Object.keys(styleVariables).map(key => `\$${key}: ${styleVariables[key]};`).join('\r\n')};
      @import "sass/_var.scss";
      @import "sass/_mixins.scss";
      @import "sass/_math.scss";
    `,
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname),
      'components': path.resolve(__dirname, './components'),
      'sass': path.resolve(__dirname, './sass'),
      'static': path.resolve(__dirname, './static'),
    };
    return config;
  },
});

注意： @import "sass/_var.scss"; 前面的 sass 为路径别名，如果未配置别名，引入大概会报错（我这儿可能 sass 目录在根目录原因，未配置别名也没报错）。

  • 文件说明：

_var.scss — sass 变量文件

_mixins.scss — sass mixins 文件

_math.scss — sass 数学函数，如： sin cos 等

如此，高端大气的 sass 便可以开始玩了。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-04-29/next-sass/

如果您觉得文章不错，可以点击文章中的广告支持一下！