将 sass 文件集成到 react Js 和 webpack 时出现语法错误答案

【问题标题】：getting syntax error whle integrating sass files in reactJs with webpack将 sass 文件集成到 react Js 和 webpack 时出现语法错误
【发布时间】：2019-02-27 04:28:37
【问题描述】：

意外令牌 (1:0) @import "./variables";使用 webpack 得到这个错误我的 webpack.config 就像这个模块：

{ 
     rules: [ 
       { 
         test: /\.(js|jsx)$/, 
         exclude: /node_modules/, 
         use: ['babel-loader'] 
       },
       {
          test: /\.scss$/, 
          use: [
           { loader: "style-loader" },
           { loader: "css-loader" },
           { loader: "sass-loader" }
          ]
       }
  ]
 }

谁能帮我解决问题

【问题讨论】：

你使用的是什么 webpack 版本？还可以尝试将当前的导入语句更改为导入“~./variables”或导入“variables”，检查其中一个是否适合您。
我的 web-pack 版本是 4.19.1，我尝试了你的风格，但它不起作用
loader: "postcss-loader" ,// compiles Sass to CSS, options: { options: {} } 当我使用这个 webpack 时没有显示任何错误但是当我运行我的节点时它再次显示相同的错误D:\pro1\node_modules\babel-core\lib\transformation\file\index.js:558 throw err; SyntaxError: D:/pro1/src/assets/scss/styles.scss: Unexpected token (3:0) @ import "variables"; .page-dashboard { .metrics {
我假设您安装了样式加载器？你是如何将你的 sass 包含到你的 react 应用程序中的？

标签： reactjs webpack sass node-sass

【解决方案1】：

Sass-loader 似乎与 webpack 4 不兼容。

您可以使用我在 webpack 4 中使用的 mini-css-extract-plugin。

https://github.com/webpack-contrib/mini-css-extract-plugin

人们在使用 webpack 4 时遇到了这个@import 问题。看看下面的帖子。

https://gist.github.com/mburakerman/629783c16acf5e5f03de60528d3139af

【讨论】：