时间戳

首页 > 解决方案 > 如何在 REACT SSR 中使用 SASS？

reactjs - 如何在 REACT SSR 中使用 SASS？

问题描述

我正在尝试使用 SSR 创建一个简单的 React 应用程序，但是在将 sass 文件导入组件时遇到问题，我收到SyntaxError: Unexpected token '.' . 我使用以下脚本捆绑并运行我的应用程序：

"scripts": {
  "dev-server": "nodemon --exec babel-node src/server/server.js --ignore dist/",
  "dev-bundle": "webpack -w -d"
}

我使用以下加载器将 sass 翻译成 js：

    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "style-loader"
            },
            {
              loader: "css-loader"
            },
            {
              loader: "sass-loader",
              options: {
                  sourceMap: true,
              }, // compiles Sass to CSS
            }
          ]

我不确定为什么会出现这种语法错误，有人可以帮我解决这个问题吗？

标签： reactjssassserver-side-rendering

解决方案

我得到以下错误堆栈跟踪：

SyntaxError: Unexpected token '.'
at Object.compileFunction (vm.js:344:18)
at wrapSafe (internal/modules/cjs/loader.js:1106:15)
at Module._compile (internal/modules/cjs/loader.js:1140:27)
at Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
at Object.newLoader [as .js] (...SSR-App\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:1040:32)
at Function.Module._load (internal/modules/cjs/loader.js:929:14)
at Module.require (internal/modules/cjs/loader.js:1080:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (...SSR-App\src\components\/App.js:2:1)

推荐阅读