React-MaterialUI-Starter-Kit

LESS

The project is supporting to develop the stylesheet with LESS. All the less files should be placed under src\assets\less folder and the LESS import should be in the src\index.js file.

Syntax validation

There is a command had been added to the package.json file which helps to verify the LESS best practices syntax.

run npm run lint or npm run lint-less

Stylesheet Bundling

When packaging the application for Production all stylesheet files (CSS, LESS and SCSS) will be bundled to a single file named style.css by the Webpack and storing in the dist folder.

Convert Tools

• Css to Jss here
• Css to LESS here in case you don’t like Jss.

Uninstall LESS

LESS support is one of stylesheet development option which supporting by this Starter kid. If you want to use the other stylesheet development options like CSS or SCSS and want to uninstall all LESS related things then follow steps will show you How to remove LESS from this project.

1. Run the npm uninstall —save-dev for all below packages:
   • less
   • less-loader
   • lesshint

2. Remove the below LESS config blog from Webpack config in configs\webpack\common.js file:

   {
     "test": /\.less$/,
     "use": [
       devMode ? "style-loader" : ExtractCssChunks.loader,
       {
         "loader": "css-loader",
         "options": { "url": false, "sourceMap": false }
       },
       "postcss-loader",
       {
         "loader": "less-loader",
         "options": {
           "relativeUrls": false,
           "sourceMap": false
         }
       }
     ]
   }
   

3. Remove the less folder from scr\asserts
4. Remove the LESS scripts at in package.json file.

"scripts": {
    //This is for LESS compilation checking purpose. Remove it if not inuse.
    "build-less": "lessc ./src/assets/less/material-dashboard-react.less ./src/assets/less/material-dashboard-react.css",
    //Remove the **lint-less** fron this command
    "lint": "npm-run-all lint-js lint-less",
    //Remove this line
    "lint-less": "lesshint ./src/assets/less",
  }

Samples

There is a sample LESS file named material-dashboard-react.less had been added into the project under scr\asserts folder which importing to the application in the index.jsx file.

//Style-sheets
import './assets/less/material-dashboard-react.less';

This site is open source. Improve this page.