style-resources-loader icon indicating copy to clipboard operation
style-resources-loader copied to clipboard

How do I set in CRA with craco?

Open CoderAWei opened this issue 2 years ago • 2 comments

I want to auto import less variables in all files, but fails. Here are my settings:

// craco.config.js
module.export = {
  plugins: [
    {
       plugin: styleResourcesLoader,
       options: {
         patterns: path.resolve(__dirname, './src/styles/variables.less')
       }
    }
  ]
}

It doesn't work! How can I fix it? Thanks!!!!

CoderAWei avatar May 18 '22 13:05 CoderAWei

same question!!!help!!! @CoderAWei I do like this: configure: webpackConfig => { const loaders = webpackConfig.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf; loaders.push({ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader', { loader: 'style-resources-loader', options: { patterns: [ path.resolve(__dirname, 'src/styles/_variable.less'), ], injector: 'append' } }] }) return webpackConfig } It doesn't work too!

candy4290 avatar Oct 26 '22 07:10 candy4290

I want to auto import less variables in all files, but fails. Here are my settings:

// craco.config.js
module.export = {
  plugins: [
    {
       plugin: styleResourcesLoader,
       options: {
         patterns: path.resolve(__dirname, './src/styles/variables.less')
       }
    }
  ]
}

It doesn't work! How can I fix it? Thanks!!!!

module.exports = {
 plugins: [
   {
     plugin: CracoLessPlugin,
     options: {
       modifyLessRule: (lessRule) => {
         console.log(JSON.stringify(lessRule))
         lessRule.use.push({
           loader: 'style-resources-loader',
           options: {
               patterns: path.resolve(__dirname, 'src/styles/_variable.less'),
               injector: 'append'
           }
         })
         return lessRule
       },
       lessLoaderOptions: {
         lessOptions: {
           javascriptEnabled: true,
         },
       },
     },
   },
 ]
}

candy4290 avatar Oct 26 '22 09:10 candy4290