Ant-design: importar o tema antd, webpack build show .bezierEasingMixin error?

este bug de versão menos nova !!!!! fechar!

 Inline JavaScript is not enabled. Is it set in your options?

Você pode tentar ativar a opção de javascript embutido.

onde definir esta opção?

versão: [email protected]

[email protected] está OK.

[email protected] , o item de configuração javascriptEnabled: true precisa ser ativado

{ loader: 'less-loader', options: { javascriptEnabled: true } }

Mas ainda existem erros:

@Lovesueee faixa com https://github.com/less/less.js/issues/3113

Parece que cabe ao antd implementar menos plug-ins em vez de usar o hack de função. Quando podemos esperar uma correção @yesmeck?

Corrigido em https://github.com/ant-design/ant-design/commit/9634bea391dd2b7b17f1e89383577e248081a044

Muito bom, você poderia publicar uma nova versão com essa correção? Obrigado!

@bkniffler Este fim de semana.

@bkniffler Você pode usar menos 2.7 como solução alternativa.

@yesmeck não tenho certeza do porquê, mas ainda recebo a exceção, mesmo com a versão 3.3.0. Ao fazer o downgrade para 2.7, tudo funciona conforme o esperado.

@madisvain { loader: 'less-loader', options: { javascriptEnabled: true } } se você estiver usando menos @ 3

[email protected]
[email protected]
[email protected]
.babelrc

"style": true,

trabalhar!

O que há de errado com a configuração e o estilo não é relatado ou não é exibido?

antd 3.6.3
menos 2.7.2
less-loader 4.1.0

@webMasterMrBin Tente não analisar arquivos css por meio do less-loader

@ afc163 Obrigado por complementar os princípios básicos do webpack

Não ejetei o create-react-app e estou usando react-app-rewire-less e, quando atualizo o pacote de 2.1.1 para 2.1.2, o mesmo problema ocorre.

Minha solução é manter a versão "2.1.1" em package.json .

Espero que ajude.

@FeynmanDNA ou você pode adicionar esta opção ao config-overrides.js:

config = rewireLess.withLoaderOptions({
  javascriptEnabled: true 
})(config, env);

@froston, obrigado! funciona para mim

Eu adicionei o script @froston no console que recebo:

Failed to compile
./src/resources/_antd.less
Module build failed: 


.antCheckboxFn();
^
Cannot read property 'eval' of null
      in /Users/ulisescarreon/Sites/doux_repositories/cleanui-admin-template-react/node_modules/antd/lib/checkbox/style/index.less (line 4, column 0)

algum conselho?

@froston : Grt help. Funciona bem 💯

Não é inseguro habilitar o javascript embutido?

Ei @ulisescarreonalvarez , consertou?

@hecomp

Olá, apenas mude em package.json isto:

"react-app-rewire-less": "^2.1.1",

para isso:

"react-app-rewire-less": "2.1.1",

Olá @ulisescarreonalvarez qual é a sua versão do antd?
Pegando isso agora.
./src/resources/_antd.less Module build failed: Error: Cannot find module 'less'

O meu é 3.5.3

@ulisescarreonalvarez você pode compartilhar seu config-override.js?

@hecomp config-overrides.js:

const rewired = require('react-app-rewired')
const rewireLess = require('react-app-rewire-less')
const rewireEslint = require('react-app-rewire-eslint')

function rewire(config, env) {
  const cssLoader = rewired.getLoader(
    config.module.rules,
    rule => rule.test && String(rule.test) === String(/\.css$/)
  )
  const sassLoader = {
    test: /\.scss$/,
    use: [...(cssLoader.loader || cssLoader.use), 'sass-loader']
  }
  const oneOf = config.module.rules.find(rule => rule.oneOf).oneOf
  oneOf.unshift(sassLoader)

  config = rewired.injectBabelPlugin('transform-decorators-legacy', config)
  config = rewireLess(config, env)
  config = rewireEslint(config, env)
  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true 
  })(config, env);

  return config
}

module.exports = rewire

jsconfig.json:

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  },
  "exclude": ["node_modules"]
}

package.json:

{
  "name": "Project",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "husky": "^0.14.3",
    "lint-staged": "^4.0.2",
    "node-sass": "^4.9.0",
    "prettier": "^1.5.3",
    "querystring": "^0.2.0",
    "react-app-rewire-eslint": "^0.2.3",
    "react-app-rewire-less": "2.1.1",
    "react-app-rewired": "^1.5.2",
    "react-dnd": "^2.6.0",
    "react-dnd-html5-backend": "^2.6.0",
    "react-scripts": "^1.1.4",
    "redux-devtools-extension": "^2.13.0",
    "redux-logger": "^3.0.1",
    "sass-loader": "^7.0.1"
  },
  "dependencies": {
    "@rowno/sparkline": "^3.0.1",
    "ajv": "^6.5.0",
    "antd": "^3.5.3",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.1",
    "chart.js": "^2.7.2",
    "chartist": "^0.10.1",
    "chartist-plugin-tooltip": "^0.0.11",
    "classnames": "^2.2.5",
    "d3-dsv": "^1.0.8",
    "d3-format": "^1.2.1",
    "d3-scale": "^1.0.7",
    "d3-time-format": "^2.1.1",
    "draft-js": "^0.10.5",
    "enquire-js": "^0.2.1",
    "fetch-jsonp": "^1.1.3",
    "immutability-helper": "^2.7.0",
    "immutable": "^3.8.2",
    "jquery": "^3.3.1",
    "lodash": "^4.17.10",
    "moment": "^2.19.3",
    "moment-timezone": "^0.5.14",
    "peity-react": "^0.0.7",
    "popper.js": "^1.14.3",
    "prop-types": "^15.5.10",
    "rc-drawer-menu": "^0.5.7",
    "react": "^16.4.0",
    "react-avatar-editor": "^10.2.1",
    "react-c3js": "^0.1.20",
    "react-chartist": "^0.13.1",
    "react-chartjs-2": "^2.7.0",
    "react-container-query": "^0.11.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^16.4.0",
    "react-draft-wysiwyg": "^1.12.13",
    "react-helmet": "^5.2.0",
    "react-infinite-scroller": "^1.1.4",
    "react-loadable": "^5.4.0",
    "react-redux": "^5.0.7",
    "react-redux-spinner": "^1.1.3",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-stockcharts": "^0.7.0-beta.22",
    "react-syntax-highlighter": "^7.0.4",
    "react-transition-group": "^2.3.1",
    "react-virtualized": "^9.18.5",
    "redux": "^3.7.2",
    "redux-act": "^1.3.0",
    "redux-thunk": "^2.2.0",
    "reqwest": "^2.0.5",
    "webpack": "^3.12.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "eject": "react-scripts eject",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.js": [
      "prettier --tab-width 2 --print-width 100 --single-quote --trailing-comma all --no-semi --parser babylon --write"
    ]
  }
}

@Remimstr

Não é inseguro habilitar o javascript embutido?

Pode ser. O perigo é que às vezes é comum que as bibliotecas do Less tenham uma "configuração online" para variáveis ​​para habilitá-las. Se você não limpar essa entrada, estará essencialmente avaliando qualquer código como:

@theme-color: `code_to_delete_my_whole_computer_oops()`

Portanto, ao forçar os usuários a substituir a opção javascriptEnabled para continuar usando esta biblioteca, você está essencialmente abrindo uma brecha de segurança em potencial que evita a desativação. Verdade, isso só acontece quando você coloca uma entrada não higienizada em Less com essa opção, mas sem a opção, a entrada não higienizada simplesmente não é analisada. É por isso que é melhor corrigir a biblioteca de design e usar a sintaxe @plugin vez de forçar a opção javascriptEnabled: true .

@matthew-dean Você poderia nos ajudar a conseguir isso?

@ afc163 Claro. Primeiro, o que essa função gigante está realmente fazendo? Não está claro qual é o resultado.

Tipo, esta linha está configurando this.colorEasing . Mas por que? Qual é o valor de this supostamente aqui? Ele está tentando vazar globais para outro módulo? https://github.com/ant-design/ant-design/blob/cfdf06213b952451600ae659e69fa302a7baf271/components/style/color/bezierEasing.less#L102

Com base em um problema que preenchi há algum tempo, parece que sim, você está vazando globais no namespace raiz de propósito. https://github.com/ant-design/ant-design/issues/11097

@matthew-dean Obrigado por responder à minha pergunta!

@ afc163 Fez um RP aqui. https://github.com/ant-design/ant-design/pull/13242

Espero que ajude.

Ei cara, eu encontrei um erro parecido com este, quando eu uso o Antd.

./src/index.less
A construção do módulo falhou:

// https://github.com/ant-design/ant-motion/issues/44
.tinyColorMixin ();
^

e meu config-overrides.js
const {injectBabelPlugin} = require ('react-app-rewired');
const rewireLess = require ('react-app-rewire-less');

module.exports = substituição da função (configuração, env) {
config = injectBabelPlugin (
['import', {libraryName: 'antd', libraryDirectory: 'es', style: true}], // altere o css de importação para menos
config
);
config = rewireLess.withLoaderOptions ({
javascriptEnabled: true
}) (configuração, env);
return config;
};

meu package.json assim

"react-app-rewire-less": "^ 2.1.3",
"react-app-rewired": "^ 1.6.2",

Ei - estou tentando migrar um projeto de jsx para jsx + ts.
Na verdade, ele está mesclando um modelo de administração com algo já desenvolvido usando JHipster.

Estou recebendo o seguinte erro que vejo outras pessoas neste tópico ...

ERRO em ./src/resources/_antd.less (./node_modules/css-loader??ref--9-1!./node_modules/less-loader/dist/cjs.js??ref--9-2! ./src/resources/_antd.less)
A construção do módulo falhou (de ./node_modules/less-loader/dist/cjs.js):
.antCheckboxFn ();
^
Não é possível ler a propriedade 'eval' de nulo
em Documentswscleanui-typescriptnode_modulesantdlibcheckboxstyleindex.less (linha 4, coluna 0)

e na configuração do meu webpack estou usando a opção javascript less-loader.
Desativar mostra o erro 'Javascript embutido' e Ativar mostra o erro acima.

Alguma ideia?

webpack.dev.js
módulo: {
as regras: [
{
teste: /.less$/,
usar: [
{loader: 'style-loader' // cria nós de estilo a partir de strings JS
}, {
loader: 'css-loader', // traduz CSS em CommonJS
opções: {importLoaders: 1}
},
{
carregador: 'less-loader',
opções: {
javascriptEnabled: true
}
}]
},
{
test: /.(sa|sc|c)ss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', {
loader: 'sass-loader',
opções: {implementação: sass}
}
]
},
]
}
`

package.json

[{
  "name": "tensor-base-template",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "devDependencies": {
    "@types/chai": "4.1.4",
    "@types/enzyme": "3.1.13",
    "@types/jest": "23.3.1",
    "@types/lodash": "4.14.116",
    "@types/mocha": "5.2.5",
    "@types/node": "10.9.2",
    "@types/react": "16.4.12",
    "@types/react-dom": "16.0.7",
    "@types/react-redux": "6.0.6",
    "@types/react-router-dom": "4.3.0",
    "@types/redux": "3.6.31",
    "@types/selenium-webdriver": "3.0.10",
    "@types/webpack-env": "1.13.6",
    "autoprefixer": "9.2.0",
    "browser-sync": "2.26.3",
    "browser-sync-webpack-plugin": "2.2.2",
    "cache-loader": "1.2.2",
    "chai": "4.1.2",
    "chai-as-promised": "7.1.1",
    "copy-webpack-plugin": "4.5.2",
    "core-js": "2.5.7",
    "cross-env": "5.2.0",
    "css-loader": "1.0.0",
    "enzyme": "3.5.0",
    "enzyme-adapter-react-16": "1.3.0",
    "enzyme-to-json": "3.3.4",
    "file-loader": "2.0.0",
    "fork-ts-checker-webpack-plugin": "0.4.9",
    "friendly-errors-webpack-plugin": "1.7.0",
    "generator-jhipster": "5.7.0",
    "html-webpack-plugin": "3.2.0",
    "husky": "1.1.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.5.0",
    "jest-junit": "5.1.0",
    "jest-sonar-reporter": "2.0.0",
    "json-loader": "0.5.7",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "lint-staged": "7.3.0",
    "mini-css-extract-plugin": "0.4.2",
    "mocha": "5.2.0",
    "moment-locales-webpack-plugin": "1.0.7",
    "optimize-css-assets-webpack-plugin": "5.0.0",
    "postcss-loader": "3.0.0",
    "prettier": "1.14.3",
    "protractor": "5.4.0",
    "react-infinite-scroller": "1.2.0",
    "redux-mock-store": "1.5.3",
    "rimraf": "2.6.2",
    "sass": "1.13.0",
    "sass-loader": "7.1.0",
    "simple-progress-webpack-plugin": "1.1.2",
    "sinon": "6.1.5",
    "source-map-loader": "0.2.4",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "stripcomment-loader": "0.1.0",
    "style-loader": "0.22.1",
    "swagger-ui": "2.2.10",
    "terser-webpack-plugin": "1.0.2",
    "thread-loader": "1.2.0",
    "to-string-loader": "1.1.5",
    "ts-jest": "23.1.4",
    "ts-loader": "4.5.0",
    "ts-node": "7.0.1",
    "tslint": "5.11.0",
    "tslint-config-prettier": "1.15.0",
    "tslint-eslint-rules": "5.4.0",
    "tslint-loader": "3.6.0",
    "tslint-react": "3.6.0",
    "typescript": "3.0.1",
    "webpack": "4.17.1",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.6",
    "webpack-merge": "4.1.4",
    "webpack-notifier": "1.7.0",
    "workbox-webpack-plugin": "3.4.1",
    "write-file-webpack-plugin": "4.3.2",
    "xml2js": "0.4.19"
  },
  "dependencies": {
    "@rowno/sparkline": "^3.0.1",
    "antd": "^3.11.2",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.1",
    "classnames": "^2.2.5",
    "enquire-js": "^0.2.1",
    "immutability-helper": "^2.7.0",
    "immutable": "^3.8.2",
    "lodash": "^4.17.10",
    "moment": "^2.19.3",
    "moment-timezone": "^0.5.14",
    "peity-react": "^0.0.7",
    "prop-types": "^15.5.10",
    "rc-drawer": "^1.4.4",
    "react": "^16.4.12",
    "react-container-query": "^0.11.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^16.4.7",
    "react-helmet": "^5.2.0",
    "react-hot-loader": "3.1.1",
    "react-infinite-scroller": "^1.1.4",
    "react-loadable": "^5.4.0",
    "react-redux": "5.0.7",
    "react-redux-spinner": "^1.1.3",
    "react-router": "^4.2.0",
    "react-router-dom": "4.3.1",
    "react-router-redux": "^5.0.0-alpha.6",
    "redux": "^3.7.2",
    "redux-act": "^1.3.0",
    "redux-devtools": "3.4.1",
    "redux-devtools-dock-monitor": "1.1.3",
    "redux-devtools-extension": "^2.13.7",
    "redux-devtools-log-monitor": "1.4.0",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "5.1.1",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "prettier:format": "prettier --write \"src/**/*.{json,ts,tsx,css,scss}\"",
    "lint": "tslint --project tsconfig.json -e 'node_modules/**'",
    "lint:fix": "npm run lint -- --fix",
    "cleanup": "rimraf target/www",
    "start": "npm run webpack:dev",
    "start-tls": "npm run webpack:dev -- --env.tls",
    "test": "npm run lint && jest --coverage --logHeapUsage -w=2 --config src/test/javascript/jest.conf.js",
    "test:watch": "npm test -- --watch",
    "webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --port=9060 --env.stats=minimal",
    "webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --port=9060 --profile --progress --env.stats=normal",
    "webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=minimal",
    "webpack:build": "npm run cleanup && npm run webpack:build:main",
    "webpack:prod:main": "npm run webpack -- --config webpack/webpack.prod.js --profile",
    "webpack:prod": "npm run cleanup && npm run webpack:prod:main",
    "webpack:test": "npm run test",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
  },
  "lint-staged": {
    "src/**/*.js": [
      "prettier --tab-width 2 --print-width 100 --single-quote --trailing-comma all --no-semi --parser babylon --write"
    ]
  }
}
]

Para aqueles que ainda estão tendo esse problema ao usar node-less-chokidar .

parece que houve um PR para isso, mas não foi mesclado por mais de 2 meses. Você pode fazer as alterações feitas no commit desse PR no seu arquivo \node_modules\node-less-chokidar\bin\node-less-chokidar (são apenas algumas linhas) e funciona.

Aqui estão os detalhes do commit

https://github.com/sampi/node-less-chokidar/pull/14/commits/934af235d16f63edaf9b8ae04eb22e3b82917701

EDITAR: foi mesclado com o master yeterday em node-less-chokidhar

Se o número da versão do plug-in （less-loader） for 6 ou superior ：
"less-loader": "^ 6.1.0",
"menos": "^ 2.7.3",

A nova maneira de escrever é
{
loader: "less-loader",
opções: {
lessOptions: {
javascriptEnabled: true,
}
}
}

Se o número da versão do plug-in （less-loader） for 6 ou superior ：
"less-loader": "^ 6.1.0",
"menos": "^ 2.7.3",

A nova maneira de escrever é
{
loader: "less-loader",
opções: {
lessOptions: {
javascriptEnabled: true,
}
}
}

Estilo do código de formato:

{
  loader: 'less-loader',
  options: {
    lessOptions: {
      javascriptEnabled: true
    }
  }
}