reactjs - 如何使用 gatsby 插件将 CSS 更改为 SASS?
问题描述
我正在尝试将我的 CSS 更改为 SASS。为了实现这一点,我安装了 gatsby-plugin-sass,但是每当我执行它时,我都会收到一个错误。我该如何解决这个错误?
这是安装 gatsby-plugin-sass 后我的 gatsby-config.js 的样子:
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
'gatsby-transformer-remark'
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
这就是我尝试使用 sass 代码的方式:
$font-stack : Roboto;
$primary-color : 'orange';
h1{
font-family: $font-stack;
color: $primary-color
}
我收到的错误如下:
Module parse failed: Unexpected token (1:12)
You may need an appropriate loader to handle this file type.
> $font-stack : Roboto;
| $primary-color : 'orange';
|
我该如何解决这个错误?
解决方案
推荐阅读
- java - 标签的 JavaFX 鼠标单击事件
- python - Python3:在 GUVI 上输入时出现 EOF 错误
- cmake - 如何每次 cmake 调用只打印一次消息?
- deployment - Nextjs/postcss css 变量在生产中不可用 (Zeit)
- r - 错误的维度数量股票价格
- angular - Angular Production Build 找不到插件“proposal-numeric-separator”
- io - 如何使用 Fortran 从 *.obj 文件中读取人脸信息
- c++ - Visual Studio 2019 拒绝构建解决方案 C++
- javascript - 替换数据而不是向现有数据添加数据
- c# - 使用 if 语句检查布尔值