Пытаюсь подключить css modules в проект, но сыплется вот такая ошибка, что я делаю не так? "webpack": "3.12.0"
Syntax Error: CssSyntaxError
(2:1) Unknown word
1 |
> 2 | var content = require("!!../../../../../../node_modules/css-loader/dist/cjs.js??ref--10-1!../../../../../../node_modules/postcss-loader/lib/index.js??postcss!./list.css");
| ^
3 |
4 | if(typeof content === 'string') content = [[module.id, content, '']];
@ ./resources/coreUi/src/views/RequestCashboxIn/List/list.css 2:14-277
@ ./resources/coreUi/src/views/RequestCashboxIn/List/List.js
@ ./resources/coreUi/src/routes.js
@ ./resources/coreUi/src/containers/DefaultLayout/DefaultLayout.js
@ ./resources/coreUi/src/containers/index.js
@ ./resources/coreUi/src/App.js
@ ./resources/coreUi/src/index.js
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js ./resources/assets/sass/auth.scss
error in ./resources/coreUi/src/views/SelfServiceDevices/List/list.css
Вот конфиг
mix.react('resources/assets/js/app.js', 'public/js')
.react('resources/assets/js/appAuth.js', 'public/js')
.sass('resources/assets/sass/auth.scss', 'public/css/auth.css')
.webpackConfig({
module: {
rules: [
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-modules-values'),
],
},
},
],
}
]
}
});
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"make-block": "babel-node --presets @babel/preset-env make-block.js",
"make-block:page": "babel-node --presets @babel/preset-env make-block.js --page"
},
"dependencies": {
"@coreui/coreui": "^2.0.1",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"@coreui/icons": "^0.1.1",
"@coreui/react": "^2.0.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bootstrap": "^4.1.1",
"chance": "^1.0.16",
"chart.js": "^2.7.2",
"classnames": "^2.2.5",
"core-js": "^2.5.6",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"file-saver": "^2.0.0-rc.3",
"flag-icon-css": "^3.0.0",
"font-awesome": "^4.7.0",
"moment": "^2.22.2",
"moment-range": "^4.0.1",
"prop-types": "^15.6.1",
"rc-time-picker": "^3.3.1",
"react": "^16.4.1",
"react-chartjs-2": "^2.7.2",
"react-daterange-picker": "^2.0.1",
"react-dates": "^18.0.4",
"react-dom": "^16.4.1",
"react-input-mask": "^2.0.3",
"react-loadable": "^5.4.0",
"react-moment": "^0.7.9",
"react-redux": "^5.1.1",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.2.2",
"react-select": "2.0.0",
"react-syntax-highlighter": "^7.0.1",
"react-table": "^6.8.6",
"react-tabs": "^2.3.0",
"react-test-renderer": "^16.3.2",
"react-time-picker": "^2.5.2",
"react-xml-parser": "^1.0.8",
"reactstrap": "^6.0.1",
"simple-line-icons": "^2.4.1",
"utf8": "^3.0.0",
"xml2js": "^0.4.19"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/node": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-jest": "^22.4.3",
"babel-plugin-transform-object-assign": "^6.22.0",
"cross-env": "^5.0.1",
"css-loader": "^2.1.0",
"extract-text-webpack-plugin": "^3.0.2",
"laravel-mix": "^1.0",
"node-sass": "^4.11.0",
"node-sass-chokidar": "^1.3.0",
"npm-run-all": "^4.1.2",
"postcss-loader": "^3.0.0",
"react-scripts": "^1.1.4",
"redux": "^3.7.2",
"redux-devtools": "^3.4.2",
"redux-devtools-dock-monitor": "^1.1.3",
"redux-devtools-log-monitor": "^1.4.0",
"redux-thunk": "^2.3.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack": "3.12.0"
}
}
list.css
.container {
display: block;
}
.additionalActions {
display: flex;
}
.deletButton {
margin-left: 20px;
}
.additionalActions {
border-radius: 0 0 4px 4px;
}
.nest .additionalActions {
border-radius: 0;
}
Виртуальный выделенный сервер (VDS) становится отличным выбором
Добрый ДеньИзучаю способы организации наследования в JavaScript и написал небольшой пример :
На клиенте я по умолчанию выставляю zoom равный 13:
Не работает contextscale(-1, 1) для отражения картинки на канвасе
Имея такой код я хочу сделать логику опросника подобную этой: https://nasty6typeform