Question

有人可以告诉我是否值得使用Sass / SCSS和React？

我最终设置了SCSS以使用Create-React-App而不会弹出，但它似乎不能很好地工作，因为建议在每个组件中使用CSS模块。

我如何分享变量，mixins等。使用CSS会更好吗？

非常感谢任何帮助。

Answer 1

我强烈建议您使用scss，因为您仍然可以使用带SCSS的CSS模块。我不熟悉create react app设置，但通常你会使用样式加载器配置webpack，如下所示：

  {
    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”，这些样式将可用作模块。< / p>

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

要共享变量和mixin我总是使用全局scss文件，这在应用程序中是必需的（例如在app.js中）。但是，您仍然需要在需要变量和mixin的每个component-scss中导入该文件。

  // 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提供的灵活性和可维护性对大型项目非常有用，尤其是反应。

但是，不要让自己受到我或他人意见的影响 - 你可以自由地使用你最熟悉的东西，并且应该总是质疑事情的完成方式。

Answer 2

2.版本的create-react-app现在支持Sass。安装node-sass（例如npm install node-sass）以启用它。结帐this application's Navigation component。

Answer 3

create-react-app V2的相应部分doc ：（开箱即用的支持） https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav

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;
}

sass with create react app

4 个答案: