Using LESS CSS with the latest Create React App

user_1189352 0
Viewed 5930

It seems like everything i'm finding online is old and doesn't seem to work for me.. Any help is appreciated.

I ran "npm run eject". Then I installed with NPM

"devDependencies": {
   "less": "^3.12.2",
   "less-loader": "^6.2.0"
 },

and in my "webpack.config.js" file this is how i have it so far:

module: {
  strictExportPresence: true,
  rules: [
    {
      test: /\.less$/,
      loader: 'less-loader', // compiles Less to CSS
    },
    // Disable require.ensure as it's not a standard language feature.
    { parser: { requireEnsure: false } },

    // First, run the linter.
    // It's important to do this before Babel processes the JS.
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      enforce: 'pre',
      use: [
        {
          options: {
            cache: true,
            formatter: require.resolve('react-dev-utils/eslintFormatter'),
            eslintPath: require.resolve('eslint'),
            resolvePluginsRelativeTo: __dirname,
            
          },
          loader: require.resolve('eslint-loader'),
        },
      ],
      include: paths.appSrc,
    },

and then i get this error message when trying to run:

Failed to compile ./src/styles/index.less (./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./node_modules/file-loader/dist/cjs.js??ref--7-oneOf-7!./src/styles/index.less)

module.exports = webpack_public_path + "static/media/index.1f54121a.less"; ^ Unrecognised input Error in G:\Work Projects\uno\src\styles\index.less (line 1, column 15)

webpack reactjs less css
1 Answers

Hopefully this helps someonme. I found the answer here: https://segmentfault.com/a/1190000018858055

Short Version:

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;
...
...
...
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
  test: cssRegex,           // edited to add less above
  exclude: cssModuleRegex,  // edited to add less above
  use: getStyleLoaders({
    importLoaders: 2,       // changed from 1 to 2
    modules: true,          // added this line
    sourceMap: isEnvProduction && shouldUseSourceMap,
  },
  'less-loader'),
  // Don't consider CSS imports dead code even if the
  // containing package claims to have no side effects.
  // Remove this when webpack adds a warning or an error for this.
  // See https://github.com/webpack/webpack/issues/6571
  sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
  test: cssModuleRegex,
  // etc
user_11893520
Related