Less files in components

[ilyadoroshin]

Hey, guys.

I must've msised something, but why do we add less-files into components? What's the purpose on that and how does it work (link on docs will do, google couldn't help me).

Thanks in advance!

[koistya]

@ilyadoroshin you can google for component-based UI development, take a look here for example:

• https://suitcss.github.io
• https://en.bem.info/method/definitions/

The purpose of this is to have independent from each other components, instead of sharing styles and other assets between components you use composition. This allows to avoid possible bugs, when editing a shared resource for one component may break another one which depends on the same shared resource (CSS, image etc.)

[ilyadoroshin]

@koistya thanks, i know a lot about bem, use it everywhere, i just cannot get what does react do with that less file inside of component?
sorry for stupid question)

[koistya]

@ilyadoroshin as opposed to have shared folders for styles, images? If you have all the resources referenced by the component in a single place (inside component's folder), you will be able to easily find them, you will be confident that editing these files won't affect other components. You can also remove component's folder and be sure that you have not left any assets which are no longer in use.

[koistya]

@ilyadoroshin or, do you mean, why LESS and not SASS or Stylus or plain CSS?

[ilyadoroshin]

@koistya oh, so you're saying, that under the hood, less files are combined together from all components into one file, right?
What module does that?

[koistya]

Regarding how does it work.. during the application bundling process, those CSS/LESS files are aggregated and embedded into the bundle itself (alternatively an external style.css file can be created, depending on your build config).

Check this out:

• http://webpack.github.io/docs/stylesheets.html
• https://github.com/webpack/css-loader
• https://github.com/webpack/style-loader
• https://github.com/webpack/url-loader
• https://github.com/webpack/file-loader

[ilyadoroshin]

@koistya sick 👍
Thank you so much for helping understanding that!
The whole approach is awesome!

[koistya]

For example, you may have a Navigation React component with the following files:

./src/components/Navigation/Navigation.js
./src/components/Navigation/Navigation.css
./src/components/Navigation/close.svg

Inside your CSS or React code you can reference that image using relative path:

.Navigation-close {
  background-image: url('./close.svg');
}

And when you build the project, this close.svg will be copied into ./build/img/close-a3b783c.svg and URL to that image is going to be set to a new one background-image: url(/img/close-a3b783c.svg) (inside the app bundle's CSS).

[ilyadoroshin]

@koistya jee, man, that's awesome!
Do you know, is there any implementation like that on rails?)

[ilyadoroshin]

@koistya Actually, I've got only one question left. I'm used to sass, and I moved everything to sass, but build fails because import of component's sass-file fails.
Is there anything I need to tune up for using sass?

[koistya]

@ilyadoroshin try to replace less-loader with sass-loader in webpack.config.js

react-starter-kit/webpack.config.js

Lines 66 to 70 in 7910f58

	{
	test: /\.less$/,
	loader: 'style-loader!css-loader!' + AUTOPREFIXER_LOADER +
	'!less-loader'
	},

[ilyadoroshin]

@koistya tried this one, I get
Uncaught Error: Cannot find module "./App.sass" everytime..

[koistya]

      {
        test: /\.(sass|scss)$/,
        loader: 'style-loader!css-loader!' + AUTOPREFIXER_LOADER + '!sass-loader'
      }

[ilyadoroshin]

@koistya nope.. still not loading.
Please tell me, is it performed on server side (server.js)?

[koistya]

Are you sure you have test: /\.sass$/ part set correctly? These import './App.sass' lines are stripped off during bundling by Webpack (see what's inside ./build/app.js and ./build/server.js after the build). You may want to run gulp build --verbose to see webpack's log.

[ilyadoroshin]

@koistya I've done all exactly as you said:

// App.js
import './App.sass';

// webpack.config.js
      {
        test: /\.sass$/,
        loader: 'style-loader!css-loader!' + AUTOPREFIXER_LOADER + '!sass-loader'
      },

// $ gulp build --verbose
 ERROR in ./src/components/App/App.js
    Module not found: Error: Cannot resolve 'file' or 'directory' ./App.sass 

[koistya]

It seems like sass-loader is not used and webpack thinks that it should load ./App.sass as a regular node/npm module.

Have you installed sass-loader? npm install sass-loader --save-dev

[ilyadoroshin]

@koistya that works! But for proper sass (not scss) support need to add ?indentedStyle to sass-loader

Thanks a bunch!

[cmnstmntmn]

@ilyadoroshin how did you solve the import of normalize.css after you switched from less to scss?

ERROR in ./src/components/App/App.scss Module parse failed: /Users/ctin/repos/goxgames/src/components/App/App.scss Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | @import (less) '../../../node_modules/normalize.css/normalize.css';

[koistya]

@cmnstmntmn Try to remove (less) part from that line.