Постепенное включение модулей CSS в кодовую базу с файлами LESS.CSS

Разбираемся в CSS
Ответить
Anonymous
 Постепенное включение модулей CSS в кодовую базу с файлами LESS.

Сообщение Anonymous »

Я пытаюсь поэтапно перейти на модули CSS из приложения, в котором около 100 файлов LESS.
Кажется, я больше не могу собрать свое приложение, поэтому мне интересно, можно ли кто-нибудь может взглянуть.
Мой загрузчик CSS и postCSLoader выглядят так:

Код: Выделить всё

{
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')],
},
},
}
Затем замените переменные, которые использовались в файле CSS, на что-то вроде:

Код: Выделить всё

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;
}
Но я получаю желтую волнистую линию на @value:

Неизвестно в правиле @value less (unknownAtRules)

И просто куча ошибок в моей консоли при сборке клиентского пакета:

Код: Выделить всё

@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
Может ли кто-нибудь помочь мне понять, в чем дело?

Подробнее здесь: https://stackoverflow.com/questions/793 ... less-files
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»