Problemas com menos variáveis em _theme.menos
-
29-09-2020 - |
Pergunta
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.
Solução
@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