使用Create React App和Sass

Question

请问在React中使用Sass/SCSS值得吗？

我已经成功地在Create-React-App中设置了SCSS，但是它似乎不太好用，因为建议针对每个组件使用CSS模块。

如果要共享变量、mixin等，应该如何操作？是否最好只使用CSS？

非常感谢任何帮助。

- brett

---

使用CSS-in-JS（模块或其他你喜欢的称呼）而不是index.scss文件是一种架构选择，两者并无优劣之分。使用最舒适的方式，如果你对CSS模块提供的与Sass不同的功能感兴趣，可以进一步了解。 - glhrmv

如果这个或任何答案解决了您的问题，请考虑通过点击复选框并点赞来接受它。这向更广泛的社区表明您已找到解决方案，并为回答者和您自己赢得了一些声誉。没有义务这样做 :) - patelarpan

Answer 1

现在，create-react-app的第二个版本已经支持Sass了。要启用它，请安装node-sass（例如npm install node-sass）。如需进一步说明，请查看文档。如果需要示例，请查看此应用程序的导航组件。

- Robin Wieruch

Answer 2

我强烈推荐使用scss，因为您仍然可以在scss中使用CSS-Modules。 我不熟悉create react app设置，但通常您会像这样配置webpack与style-loader：

  {
    test: /\.scss$/,
    loaders: [
      'style-loader',
      { loader: 'css-loader', options: { modules: true } },
      'sass-loader',
    ],
    exclude: [srcDir + '/assets/scss/']
  },

加载器将反向执行，从sass-loader开始将您的scss转译为普通的css，然后使用css-loader和选项“modules: true”，这些样式将可用作模块。

当然，它可能看起来有点不同，但这是使用scss使用css模块的基本方法。

为了共享变量和mixin，我总是使用全局scss文件，在应用程序中需要它（例如在app.js中）进行要求。但是，您仍然必须在每个组件scss中导入需要变量和mixin的文件/ s。

  // GLOBAL STYLES
  {
    test: /\.scss$/,
    loaders: [
      'style-loader',
      'css-loader',
      'sass-loader',
    ],
    include: [srcDir + '/assets/scss/']
  },

或者，您可以使用PostCSS-Properties使组件更加灵活（例如为应用程序提供不同的主题，而无需在组件样式中显式导入文件），但据我所知，这些不受IE支持，并且需要您添加特定的postcss加载器。

请参见http://cssnext.io/features/#custom-properties-var

SASS提供的灵活性和可维护性对于大型项目尤其是与React一起使用非常有用。

然而，请不要被我或他人的意见所影响 - 您可以自由地使用最舒适的工具，并始终质疑事物的做法。

- elektro.blume

---

所以你正在使用带有Sass的CSS模块，并且变量是通过你的Webpack配置自动导入的？ - brett

@brett 不是的，我在需要变量的地方将我的 vars.scss 文件导入到组件特定的 components.scss 中。组件特定的 scss 文件中的其他内容仅为嵌套 css。 此时更好的方法是使用 postcss-properties，因为您不必直接导入变量文件。（然后浏览器会负责解析变量） - elektro.blume

Answer 3

create-react-app V2 相关章节文档：（支持开箱即用）https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav

- Mohamed Allal

---

使用React制作Web应用将会非常有趣！ - brett

<3 当然，你会的。有很多这样的东西 <3 - Mohamed Allal

Answer 4

使用Sass/SCSS与React基本上没有任何关联。Sass被编译为常规CSS，然后在HTML或React中使用它。

至于共享变量，当您使用@import时，它基本上只是从导入的文件中获取所有内容并将其粘贴到当前文件中，因此您可以创建一个_variables.sccs文件，并将其导入到每个需要使用全局变量的文件中。

//variables.scss
$primary: red;
$secondary: blue;


//main.scss
@import 'variables';

body {
    background-color: $primary;
    color: $secondary;
}

- JakAttk123

---

谢谢。我很想像你提到的那样使用Sass，但让我困惑的是推荐的CSS模块，它让我感到困惑。是否真的很糟糕，如果有一个Sass文件，组件可以引用它，或者我应该使用CSS模块？ - brett