Problemas com menos variáveis em _theme.menos

Question

Eu uso abaixo de consultas de mídia personalizada meu _theme.menos como

& when (@media-common = true) { }

mas quando eu executar este comando bin/magento setup:static-content:deploy Eu fico variável @media-common is undefined in file o que está errado neste caso?Usando o grunhido compila sem erros.

Answer 1

@fefe O @media-common variável é inicialmente definido em:

• vendor/magento/theme-frontend-blank/web/css/styles-m.less

• vendor/magento/theme-frontend-blank/web/css/styles-l.less

Este é se você está usando o espaço em branco ou luma tema como um pai.Se é assim, então isso se aplica a você.Se não, então qualquer que seja o seu principal tema é, deve ter uma declaração e inicialização de variável...ou se o principal tema que você está usando chamadas por ele de pai, o mesmo se aplica.

Dê uma olhada no styles-m.less e styles-l.less arquivos para ver a ordem em que os arquivos são importados.Você também pode adicionar algumas formulário de registo \Less_Parser::parseFile().

O caminho que tive de contornar isso é usar um Menor de referência de importação Menos Docs:referência opção de importação, o que vai não puxar o código dentro disse Menos do arquivo, ele só vai fazer com que os arquivos disponíveis dentro do escopo de arquivo solicitando a importação.

Um exemplo do que eu importados no topo de um costume Menos ficheiro:

@import (reference) "../source/lib/variables/_responsive.less"; @import (reference) "../source/lib/_responsive.less";

*Observe o caminho que eu estou usando aqui em relação ao meu tema personalizado personalizado Menos de caminho de arquivo em relação à eventual var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/ caminho.

Meu tema personalizado hierarquia de diretório parecido com este: app/design/frontend/<Vendor>/<theme>/web/css/custom/custom.less.

Os arquivos que eu deseja importar estão aqui:

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/_responsive.less

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/variables/_responsive.less

Meu arquivo personalizado, que vai fazer a importação, eventualmente, irá ao vivo aqui:

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/custom/custom.less

Agora, com tudo o que disse aqui está o kicker, você realmente não precisa fazer isso.Por quê?Bem, não são os estilos css no CSS Guardas, neste caso @media-common = true só deve ser chamado com a styles-m.less arquivo?Sim, porque M2 é suposto ser o primeiro celular e, portanto, o styles-m.less arquivo é o único arquivo (salvar alguns e-mail ou Menos e eu acho que alguns outros) que, na verdade, tem @media-common conjunto para true (e há apenas um punhado de arquivos que ainda definir essa variável, o período).

Portanto, tudo o que está dentro de um CSS Guarda que tem a condição de @media-common = true destina-se a ser executado sempre, excepto quando a styles-l.less o arquivo é chamado. styles-l.less define @media-common para false como o styles-m.less arquivo já deve ter carregado até esses 'comum' estilos...e se você olhar no vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml você vai ver que styles-m.css (que é gerado a partir de styles-m.less se já não é gerado Dev Docs:.css pedido .menos de pesquisa - Mais Aqui) é carregado antes de styles-l.css.

Isso significa que você pode literalmente pegar em torno de erro ao definir @media-common: true; no topo de seu personalizado Menos de arquivo e, baseado no que eu descrevi acima e o que eu estou entendendo do código de tão longe, que deve tomar cuidado com o erro.

Aqui está o problema: Se você está incluindo o source/lib/_responsive.less & source/lib/variables/_responsive.less arquivos ou definir o seu próprio @media-common: true; na parte superior do seu arquivo personalizado, este irá substituir o @media-common: false; atribuição em styles-l.less, assim que você está indo para obter a duplicação de código em ambos os styles-m.less e styles-l.less.Eu não vejo nenhuma maneira de contornar isso no momento.A raiz do problema é que a nossa personalizado Menos arquivos não estão sendo carregados depois de ambos styles-m.less e styles-l.less ou que o @media-common o valor da variável não está sendo trazido para o âmbito do nosso personalizada Menos arquivos.Isso não deve ser o caso, se nós estamos importando de nossos personalizado menos através do _extend.less arquivo, que o docs (sugerir), como você tem o seguinte no final de ambos os styles-m.less e styles-l.less:

//@magento_import 'source/_extend.less';

Espero que tenha dado tanto a introspecção e a uma imediata solução para o seu problema.

Se você ou alguém surge com uma solução melhor, sou todo ouvidos.

ATUALIZAÇÃO Então desconsidere o que eu mencionei acima sobre a duplicação de código.No meu caso, eu era a adição de uma inclusão explícita do meu css personalizado em uma página e Eu também adicionei a minha personalizado menos de arquivo para o meu tema do _extend.less.

Eu estava modificando app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml para incluir o seguinte:

<head> <!-- ADD PAGE-SPECIFIC STYLES SHEETS HERE --> <css src="css/pages/homepage.css" /> </head>

e eu também tinha uma entrada no app/design/frontend/<Vendor>/<theme>/web/css/source/_extend.less de:

@import "../pages/homepage.less";

O que eu descobri é que ele não é ou, não tanto.Então, nesse caso, quando o M2 estava tentando processar uma solicitação para http://vappey.dev/static/frontend/<Vendor>/<theme>/<locale>/css/pages/homepage.css ele iria carregar o adequado homepage.less arquivo e este arquivo não teria @media-common dentro de seu escopo, de modo que o erro estava dizendo.Para isso, adicione importação de referências, como eu mencionei acima e, não haverá a duplicação de código.Além disso, mas removendo a entrada do _extend.less meu styles-m.less e styles-l.less não olhar para o homepage.less arquivo e não há a duplicação de código.

• Meu exemplo aqui é para página inicial-estilos específicos...mas isto ilustra uma situação onde eu não estava usando o sistema corretamente e é por isso que eu estava ficando com um erro.Espero que isso ajude