weixin_39539764
weixin_39539764
2021-01-07 15:15

use scss variables across scss files

so I started my first component:


require('styles/Branding.scss');
require('styles/Cart.scss');

import React from 'react';

class Cart extends React.Component {
    render() {
        return (
            <div classname="cart">
                Cart
            </div>
        );
    }
}

Cart.defaultProps = {
};

export default Cart;

Branding.scss has a lot of variables that I'd like to use inside Cart.scss. How do I make Branding.scss globally available in all components? Preferably without requireing them inside each one.

(Sorry I'm a React/Webpack beginner, coming from Angular, Gulp and stuff)

该提问来源于开源项目:react-webpack-generators/generator-react-webpack

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

6条回答

  • weixin_39684960 weixin_39684960 4月前

    , cc:

    I got same error like you, but when I split scss files by structure, the code will run. Here is my code, you can refer it, hope it helps.

    tmux__tmux_

     css
    // App.scss
     'base/all';
     'theme/all';
    
     css
    // base/_all.scss
     'variables';
    
     css
    // theme/_all.scss
     'home';
    
    点赞 评论 复制链接分享
  • weixin_39738152 weixin_39738152 4月前

    Hi ,

    I dont know a way to make it available globally. You could add an alias to the webpack config to require this one in your scss, then it would be a one liner.

    I will have a look at this, maybe we could include such a feature.

    点赞 评论 复制链接分享
  • weixin_39539764 weixin_39539764 4月前

    so all css files have their own scope? If I require two css files in one line, I can't use sass variables or anything from one file to the other?

    点赞 评论 复制链接分享
  • weixin_39738152 weixin_39738152 4月前

    Hi ,

    I am not an expert in sass, but this should be the case, yes. I mainly use it with less, there you are able to do something like:

     css
    /* vars.less */
    : #f00;
    
    /* some other file, wanting to use myMainColor */
     '../path/to/vars.less';
    body {
      background: ;
    }
    

    There is no global scoping as far as I know.

    点赞 评论 复制链接分享
  • weixin_39539764 weixin_39539764 4月前

    yeah I know how to import one file into another but I would've thought that all css files get merged together in one file so I don't have to set stuff specifically in each file. I mean, the classes are global when I import them in main.js. It's just the sass variables. It seems like the generator is compiling sass first, then merges the files together but IMO it should be the other way around. First merge, than compile.

    点赞 评论 复制链接分享
  • weixin_39738152 weixin_39738152 4月前

    Hi ,

    I am not using sass extensively, but I know it is possible to inject global variables directly in the loader. Here is a quote from the entry page:

    
    Environment variables
    
    If you want to prepend Sass code before the actual entry file, you can simply set the data-option. In this case, the sass-loader will not override the data-option but just append the entry's content. This is especially useful when some of your Sass variables depend on the environment. You may find more information here: https://github.com/jtangelder/sass-loader#environment-variables.
    

    As I said, I am using less most of the time, so this is the workflow I am used to.

    You are right, webpack compiles sass first. You can see the config in cfg/defaults.js:

    
          {
            test: /\.sass/,
            loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
          },
    

    You may want to try out a different configuration there. Hope this helps. Please feel free to open this issue again if the problem cannot be solved.

    点赞 评论 复制链接分享

相关推荐