Incremental inclusion of CSS Modules in codebase with LESS files - Stack Overflow

admin管理员组

文章数量:1123931

I am trying to incrementally migrate to CSS Modules from an app that has about 100 LESS files.

I can't seem to get my app to build anymore so I was wondering if someone can take a look.

My CSS loader and postCSSLoader looks like this:

{
    loader: 'css-loader',
    options: {
        url: false,
        modules: /.*\.module\.(css|less)$/, // I want to only turn on CSS modules for files that have *.module.*
        localIdentName: '[sha1:hash:hex:6]',
    },
},
{
    loader: 'postcss-loader',
    options: {
        postcssOptions: {
            ident: 'postcss',
            plugins: () => [require('postcss-modules-values'), require('autoprefixer')],
        },
    },
}

Then, replace the variables that were used in the CSS file with something like:

colors.less -> colors.module.less

@value corporateColor: #abcdef;

myComponent.less -> myComponent.module.less

@value colors: "colors.module.less"
@value corporateColor from colors

.some-component {
    background-color: corporateColor;
}

But I get a yellow squigly line on @value:

Unknown at rule @value less(unknownAtRules)

And just a whole slew of errors in my console when building the client bundle:

@import 'myComponent';
  ^
  Less resolver error:
  'myComponent' wasn't found. Tried - /path/to/app/styles/home/myComponent.less,npm://myComponent,npm://myComponent.less,myComponent.less

  Webpack resolver error details:
  resolve 'myComponent' in '/path/to/app/styles/home'
    Parsed request is a module
    using description file: /path/to/app/package.json (relative path: ./app/styles/home)
      using description file: /path/to/app/package.json (relative path: ./app/styles/home/myComponent)
        no extension
          /path/to/app/styles/home/myComponent doesn't exist
        .less
          /path/to/app/styles/home/myComponent.less doesn't exist
        .css
          /path/to/app/styles/home/myComponent.css doesn't exist
        as directory
          /path/to/app/styles/home/myComponent doesn't exist
      resolve as module
        /path/to/app/styles/home/node_modules doesn't exist or is not a directory
        /path/to/app/styles/node_modules doesn't exist or is not a directory
        /path/to/app/node_modules doesn't exist or is not a directory
        looking for modules in /path/to/app/node_modules
          single file module
            using description file: /path/to/app/package.json (relative path: ./node_modules/myComponent)
              no extension
                /path/to/app/node_modules/myComponent doesn't exist
              .less
                /path/to/app/node_modules/myComponent.less doesn't exist
              .css
                /path/to/app/myComponent.css doesn't exist
          /paht/to/app/node_modules/myComponent doesn't exist
        /path/to/app/node_modules doesn't exist or is not a directory
        /path/to/node_modules doesn't exist or is not a directory
        /path/node_modules doesn't exist or is not a directory
        /node_modules doesn't exist or is not a directory

Can anybody help me figure out what is wrong?

本文标签： Incremental inclusion of CSS Modules in codebase with LESS filesStack Overflow