scss не может работать с webpack 4 и машинописью. Перепробовал все решения в гугле - PullRequest
0 голосов
/ 13 октября 2019

Uncaught Ошибка: сборка модуля не удалась (из ./node_modules/typings-for-css-modules-loader/lib/index.js): Ошибка: не удается найти модуль 'css-loader / locals'

app.tsx

import './App.scss';

Webpack

module.exports = {
    entry: './src/index.tsx',
    module: {
        rules: [
        {
            test: /\.scss$/,
            use: [
                {loader: "style-loader"},
                {
                    loader: "typings-for-css-modules-loader",
                    options: {
                        exportOnlyLocals: true,
                        camelcase: true,
                        modules: true
                    }
                },
                {loader: "sass-loader"}
            ]
        },
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json', '.css', '.scss']
    },
    ....
    plugins: [

        new HtmlWebpackPlugin({  // Also generate a index.html
            filename: 'index.html',
            minify: false,
            collapseWhitespace: true,
            removeAttributeQuotes: true,
            hash: true,
            template: 'src/assets/index.html'
        }),
        new Dotenv()
    ],
    devServer: {
        contentBase: './dist',
        hot: true
    }
};

App.scss

div.card {
  max-height: 100%;
  overflow: scroll;
  display: flex;
  flex: 2;
}
...

Package.json

{
  "name": "tw-real-estate-js",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.5",
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.9.0",
    "bootstrap": "^4.3.1",
    "currency-formatter": "^1.5.5",
    "dotenv": "^8.1.0",
    "g": "^2.0.1",
    "highcharts": "^7.2.0",
    "highcharts-react-official": "^2.2.2",
    "moment": "^2.24.0",
    "outliers": "0.0.3",
    "rc-slider": "^8.7.1",
    "react": "^16.9.0",
    "react-async-script-loader": "^0.3.0",
    "react-bootstrap": "^1.0.0-beta.12",
    "react-dom": "^16.9.0",
    "react-google-maps": "9.4.5",
    "react-highcharts": "^16.0.2",
    "react-rangeslider": "^2.2.0",
    "react-redux": "^7.1.1",
    "react-scripts": "3.1.2",
    "react-table": "^7.0.0-beta.0",
    "recompose": "^0.30.0",
    "redux": "^4.0.4",
    "styled-components": "^4.3.2",
    "typescript": "^3.6.3",
    "underscore": "^1.9.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "watch": "webpack -w  --mode development",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/node-sass": "^4.11.0",
    "axios": "^0.19.0",
    "css-loader": "^3.2.0",
    "dotenv-webpack": "^1.7.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "lodash": "^4.17.5",
    "markerwithlabel": "^2.0.2",
    "node-sass": "^4.12.0",
    "sass-loader": "^6.0.7",
    "react-lodash": "^0.1.2",
    "react-redux-loading-bar": "^4.4.0",
    "react-select": "^3.0.8",
    "redux-thunk": "^2.3.0",
    "style-loader": "^1.0.0",
    "svg-transform-loader": "^2.0.8",
    "ts-loader": "^6.1.2",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9",
    "webpack-livereload-plugin": "^2.2.0"
  }
}

декларации.d.ts

declare module '*.scss' {
    const content: {[className: string]: string};
    export default content;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...