javascript - Next.js 与 Sass 发生错误说 "You may need an appropriate loader to handle this file type error"

标签 javascript css sass next.js

我多次尝试连接我的 next.js 和 scss,但它不起作用。

我想我已经设置好一切以使用 scss 编译我的文件。

错误说

/scss/style.scss 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> .example {
|   color: blue;
| }

代码如下:

next.config.js

const withSass = require("@zeit/next-sass");
module.exports = withSass();

_document.js

import Document, { Head, Main, NextScript } from "next/document";

export default class extends Document {
  render() {
    return (
      <html>
        <Head>

        <link rel="stylesheet" href="/_next/static/style.css" />
        <Head />
        <body>
          <Main />
          <div id="modal" />
          <NextScript />
        </body>
      </html>
    );
  }
}

index.js

import "../scss/style.scss";

import axios from "axios";

const Index = props => {
  return (
    <div>
      <div className="example">hello</div>
      <header>
        <Header />
      </header>
      <section>
        <Body stores={props.data} />
      </section>
      <footer>
        <Footer />
      </footer>
    </div>
  );
};

style.scss 在 SCSS 文件夹中

.example {
  color: blue;
}

最佳答案

尝试将 import "../scss/style.scss"; 添加到您的 _document.js

关于javascript - Next.js 与 Sass 发生错误说 "You may need an appropriate loader to handle this file type error",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54882223/

相关文章:

javascript - 使用javascript函数将JSON日期导出到excel后无法执行日期过滤器

javascript - 使用数据库中的数据填充 jquery 自动完成功能

javascript - 如何检查jquery调用的所有图像的宽度和高度?

jquery - 不使用 .fadeIn() 和 .fadeOut() 的淡入淡出 div

javascript - 如何使div内容向右溢出时隐藏

html - Mixin容器接受0个参数但传递了2个

java - JSP + Ajax 不起作用

php - 在 php 中创建 html 表

ruby - 指南针 watch 错误 - Mac OS X

css - rails 应用程序 : pipeline asset not working as expected