настройка css modules Webpack

163
23 июля 2019, 20:00

Пытаюсь подключить 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;
}
READ ALSO
Прототипное наследование

Прототипное наследование

Добрый ДеньИзучаю способы организации наследования в JavaScript и написал небольшой пример :

127
Django GIS и leaflet, как конвертировать zoom в radius?

Django GIS и leaflet, как конвертировать zoom в radius?

На клиенте я по умолчанию выставляю zoom равный 13:

133
Не работает context.scale(-1, 1);

Не работает context.scale(-1, 1);

Не работает contextscale(-1, 1) для отражения картинки на канвасе

125
Поэтапный опросник на JavaScript

Поэтапный опросник на JavaScript

Имея такой код я хочу сделать логику опросника подобную этой: https://nasty6typeform

405