Ant-design: Importieren Sie das Antd-Theme, Webpack-Build-Show .bezierEasingMixin-Fehler ?

dieser weniger neue Versionsfehler!!!!! nah dran!

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

Sie können versuchen, die Inline-Javascript-Option zu aktivieren.

wo stellt man diese Option ein?

Version: [email protected]

[email protected] ist in Ordnung.

[email protected] , das Konfigurationselement javascriptEnabled: true muss

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

Aber es gibt immer noch Fehler:

@Lovesueee- Track mit https://github.com/less/less.js/issues/3113

Es scheint, als ob es darum geht, weniger Plugins zu implementieren, anstatt den Funktions-Hack zu verwenden. Wann können wir mit einem Fix @yesmeck rechnen?

Behoben in https://github.com/ant-design/ant-design/commit/9634bea391dd2b7b17f1e89383577e248081a044

Sehr schön, könnten Sie mit diesem Fix eine neue Version veröffentlichen? Vielen Dank!

@bkniffler Dieses Wochenende.

@bkniffler Sie können weniger 2.7 als

@yesmeck weiß nicht warum, aber ich erhalte die Ausnahme auch mit der Version 3.3.0 immer noch. Beim Downgrade auf 2.7 funktioniert alles wie erwartet.

@madisvain { loader: 'less-loader', options: { javascriptEnabled: true } } wenn Sie weniger verwenden@3

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

"style": true,

Arbeit!

Was ist an der Konfiguration falsch und der Stil wird nicht gemeldet oder nicht angezeigt?

und 3.6.3
weniger 2.7.2
Kleinlader 4.1.0

@webMasterMrBin Versuchen Sie, CSS-Dateien nicht über

@afc163 Vielen Dank für die Ergänzung der Grundlagen von Webpack

Ich habe die create-react-app nicht ausgeworfen und verwende react-app-rewire-less , und als ich das Paket von 2.1.1 auf 2.1.2 aktualisiere, trat das gleiche Problem auf.

Meine Lösung besteht darin, die Version auf "2.1.1" in package.json zu belassen.

Ich hoffe es hilft.

@FeynmanDNA oder Sie können diese Option zu config-overrides.js hinzufügen:

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

@froston danke! Für mich geht das

Ich habe das @froston- Skript auf der Konsole hinzugefügt, die ich bekomme:

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)

irgendein Rat?

@froston : Grt Hilfe. Funktioniert gut

Ist es nicht unsicher, Inline-Javascript zu aktivieren?

Hey @ulisescarreonalvarez hast du es

@hecomp

Hallo, ändere einfach auf package.json dies:

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

dazu:

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

Hallo @ulisescarreonalvarez, was ist deine antd-Version?
Bekomme das jetzt.
./src/resources/_antd.less Module build failed: Error: Cannot find module 'less'

Meins ist 3.5.3

@ulisescarreonalvarez kannst du deine config-override.js teilen?

@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

Ist es nicht unsicher, Inline-Javascript zu aktivieren?

Es kann sein. Die Gefahr besteht darin, dass Less-Bibliotheken manchmal eine "Online-Konfiguration" für Variablen haben, um das Theming zu ermöglichen. Wenn Sie diese Eingabe nicht bereinigen, bewerten Sie im Wesentlichen jeden Code wie:

@theme-color: `code_to_delete_my_whole_computer_oops()`

Indem Sie also Benutzer zwingen, die Option javascriptEnabled zu überschreiben, um diese Bibliothek weiterhin zu verwenden, öffnen Sie im Wesentlichen eine potenzielle Sicherheitslücke, die durch die Deaktivierung verhindert wird. Das passiert zwar nur, wenn Sie mit dieser Option nicht bereinigte Eingaben in Less eingegeben haben, aber ohne die Option würde die nicht bereinigte Eingabe einfach nicht geparst. Aus diesem Grund ist es besser, die Designbibliothek zu reparieren und die Syntax @plugin anstatt die Option javascriptEnabled: true erzwingen.

@matthew-dean Könntest du uns dabei helfen?

@afc163 Klar. Erstens, was macht diese riesige Funktion eigentlich? Es ist nicht klar, was die Ausgabe ist.

Diese Zeile setzt beispielsweise this.colorEasing . Aber warum? Was soll der Wert von this hier sein? Versucht es, Globals an ein anderes Modul zu übertragen? https://github.com/ant-design/ant-design/blob/cfdf06213b952451600ae659e69fa302a7baf271/components/style/color/bezierEasing.less#L102

Basierend auf einem Problem, das ich vor einiger Zeit eingereicht habe, scheint es, dass Sie absichtlich Globals in den Root-Namespace durchsickern lassen. https://github.com/ant-design/ant-design/issues/11097

@matthew-dean Vielen Dank für die Beantwortung meiner Frage!

@afc163 Habe hier eine PR gemacht. https://github.com/ant-design/ant-design/pull/13242

Ich hoffe, das hilft.

Hey Mann, ich habe einen Fehler gefunden, der so aussieht, wenn ich antd verwende.

./src/index.less
Modulaufbau fehlgeschlagen:

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

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

module.exports = Funktionsüberschreibung (config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // ändere den Import von CSS in less
Konfiguration
);
config = rewireLess.withLoaderOptions({
javascriptEnabled: true
})(config, env);
Konfiguration zurückgeben;
};

my package.json gefällt das

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

Hey - ich versuche, ein Projekt von jsx zu jsx + ts zu migrieren.
Es führt tatsächlich eine Admin-Vorlage mit etwas zusammen, das bereits mit JHipster entwickelt wurde.

Ich erhalte den folgenden Fehler, den andere in diesem Thread hatten...

FEHLER in ./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)
Modulbuild fehlgeschlagen (von ./node_modules/less-loader/dist/cjs.js):
.antCheckboxFn();
^
Kann die Eigenschaft 'eval' von null nicht lesen
in Documentswscleanui-typescriptnode_modulesantdlibcheckboxstyleindex.less (Zeile 4, Spalte 0)

und in meiner Webpack-Konfiguration verwende ich die Javascript-Option Less-Loader.
Wenn Sie dies deaktivieren, wird der Fehler "Inline Javascript" angezeigt, und das Aktivieren zeigt das obige.

Irgendwelche Ideen?

webpack.dev.js
Modul: {
Regeln: [
{
test: /.weniger$/,
verwenden: [
{loader: 'style-loader' // erstellt Stilknoten aus JS-Strings
}, {
loader: 'css-loader', // übersetzt CSS in CommonJS
Optionen:{ importLoaders: 1}
},
{
Lader: 'weniger Lader',
Optionen: {
javascriptEnabled: true
}
}]
},
{
test: /.(sa|sc|c)ss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', {
Lader: 'Sass-Lader',
Optionen: { Implementierung: sass }
}
]
},
]
}
`

Paket.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"
    ]
  }
}
]

Für diejenigen, die dieses Problem immer noch haben, wenn sie node-less-chokidar .

Es scheint, als hätte es dafür eine PR gegeben, die jedoch seit über 2 Monaten nicht mehr zusammengeführt wurde. Sie können die Änderungen, die Sie im Commit dieses PR in Ihrer \node_modules\node-less-chokidar\bin\node-less-chokidar Datei vorgenommen haben, selbst vornehmen (es sind nur ein paar Zeilen) und es funktioniert.

Hier sind die Commit-Details

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

BEARBEITEN: Dies wurde zusammengeführt, um in node-less-chokidhar . zu meistern

Wenn die Nummer der Plug-in-Version (ohne Lader) 6 oder höher ist:
"less-loader": "^6.1.0",
"weniger": "^2.7.3",

Die neue Schreibweise ist
{
Lader: "weniger Lader",
Optionen: {
wenigerOptionen: {
javascriptEnabled: wahr,
}
}
}

Wenn die Nummer der Plug-in-Version (ohne Lader) 6 oder höher ist:
"less-loader": "^6.1.0",
"weniger": "^2.7.3",

Die neue Schreibweise ist
{
Lader: "weniger Lader",
Optionen: {
wenigerOptionen: {
javascriptEnabled: wahr,
}
}
}

Codestil formatieren:

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