如何使 scss 和指南针在 ReactJS 中工作？答案

【问题标题】：How to make scss and compass work in ReactJS?如何使 scss 和指南针在 ReactJS 中工作？
【发布时间】：2018-03-13 02:50:27
【问题描述】：

你好，我是 Reactjs 的菜鸟，我目前正在使用 create-react-app，我正在尝试在 SCSS 中进行开发，我在 SCSS 中下载了一个示例，我正在尝试让它工作我按照此页面的说明进行操作：

https://medium.com/@Connorelsea/using-sass-with-create-react-app-7125d6913760

我安装了这个：包

npm install sass-loader node-sass --save-dev

然后将我的 webpack.config.dev.js 修改为如下内容：

    {
        test: /\.scss$/,

        use: [

          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: require.resolve('sass-loader'),
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
        ],
      },

然后我在我的 React 组件中导入 scss 文件：

导入'./cell.scss';

一切似乎都运行良好，但我下载这个 scss 文件的示例以这一行开头：

@import "compass/css3";

当我尝试运行我的应用程序时，会出现以下错误：

模块构建失败： @import "指南针/css3"; ^ 找不到或无法读取要导入的文件：compass/css3。父样式表：stdin 在 /cell.scss 中（第 2 行，第 1 列）

我真的没有找到任何明确的解决方案.. 任何帮助将不胜感激。

【问题讨论】：

您检查过以下链接吗？ github.com/facebook/create-react-app/blob/master/packages/…
我认为scss编译正常，问题是我不能添加这个资源罗盘，所以编译器不识别那个“罗盘”资源

标签： reactjs sass create-react-app compass

【解决方案1】：

我发现的一种解决方法是手动编译代码。

您可以将所有样式保存在样式表文件夹中。然后在 sass 目录中，保留所有 sass 文件并将 config.rb 设置为类似这样。

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

您可以使用compass compile进行编译。

确保在此之前安装指南针。

【讨论】：