0

Пытаюсь подключить 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;
}
10
  • Лучше правь вопрос. Удали картинки и добавь текстом. Под вопросом кнопка Править
    – Air
    4 янв 2019 в 7:48
  • Ну в описании ошибки написано же, что в файле list.css обнаружено незнакомое слово var
    – Dmytro
    4 янв 2019 в 8:18
  • я вижу, что там написано, не я пишу var, что сделать, чтобы ее не было 4 янв 2019 в 8:22
  • Спросите того, кто написал такой list.css
    – andreymal
    4 янв 2019 в 9:16
  • не могу, он встроен, а что с ним не так может быть? 4 янв 2019 в 9:28

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.