sass with create react app

loading...


4

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

我最终设置了SCSS与Create-React-App一起使用而没有弹出,但它似乎不能很好地工作,因为建议在每个组件中使用CSS模块 .

我将如何分享变量,mixins等 . 使用CSS更好吗?

任何帮助将不胜感激 .

5回答

  • 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”,这些样式将可用作模块 .

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

    为了共享变量和混合,我总是使用全局scss文件,这在应用程序中是必需的(例如在app.js中) . 但是,您仍然需要在需要变量和mixins的每个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提供的灵活性和可维护性对大型项目非常有用,尤其是具有反应的项目 .

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


  • -1

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


  • -1

    create-react-app V2对应的部分文档:(支持开箱即用)https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav


  • 1

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

  • 1

    你好@brett我不认为使用sass with react是个好主意 . 最好使用vanilla CSS . sass很好,但对反应项目来说并不好 . 它使你的项目变得混乱 .

    还要在他们的文档中创建react app谈论这个 .

    通常,我们建议您不要在不同的组件中重用相同的CSS类 . 例如,我们建议创建一个具有自己的.Buttonstyles的组件,而不是在组件和组件中使用.Button CSS类,它们都可以渲染(但不能继承) . 遵循此规则通常会使CSS预处理器变得不那么有用,因为mixins和嵌套等功能会被组件组合所取代 .

    如果你想我的建议样式反应应用程序然后我会去styled components

loading...

评论

暂时没有评论!