Конфигурирование и реагирование с веб-пакетом - PullRequest
Новая
       14

Конфигурирование и реагирование с веб-пакетом

0 голосов
/ 08 марта 2019

Вот ошибка, которую я получаю: 

    Uncaught Error: Module parse failed: Unexpected token (15:5)
You may need an appropriate loader to handle this file type.
| /* stylelint-disable at-rule-no-unknown */
| html,
> body {
|   width: 100%;
|   height: 100%;
    at eval (antd.css:1)
    at Object../node_modules/antd/dist/antd.css (index.js:228)
    at __webpack_require__ (index.js:20)
    at eval (App.js:10)
    at Module../KQShopping/frontend/src/App.js (index.js:97)
    at __webpack_require__ (index.js:20)
    at eval (index.js:2)
    at Module../KQShopping/frontend/src/index.js (index.js:109)
    at __webpack_require__ (index.js:20)
    at index.js:84

Файл конфигурации веб-пакета: 

    const path = require('path');
const fs  = require('fs');

const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './ant-theme-vars.less'), 'utf8'));

module.exports = {
    module: {
        rules: [
            {
                loader: 'babel-loader',
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                options: {
                    plugins: [
                        ['import', { libraryName: "antd", style: true }]
                    ]
                },
            },
            {
                test: /\.less$/,
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"},
                    {loader: "less-loader",
                        options: {
                            modifyVars: themeVariables
                        }
                    }
                ]
            }
        ]
    }
};

App.js: 

     import React from "react";
import ReactDOM from "react-dom";
import { DatePicker, message } from "antd";
import "antd/dist/antd.css";

class App extends React.Component {
    state = {
        date: null,
    };

    handleChange = date => {
        message.info(`Selected Date: ${date ? date.format("YYYY-MM-DD") : "None"}`);
        this.setState({ date });
    };

    render() {
        const { date } = this.state;
        return (
            <div style={{ width: 400, margin: "100px auto" }}>
                <DatePicker onChange={this.handleChange} />
                <div style={{ marginTop: 20 }}>
                    Selected Date: {date ? date.format("YYYY-MM-DD") : "None"}
                </div>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("app"));

Файл конфигурации Babel: 

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["transform-class-properties", ["import", { "libraryName": "antd", "style": "true" }]]
}

Я следовал нескольким учебным пособиям и инструкциям, но каждый раз получаю ошибку, и не знаю, как ее исправить, так как только начал изучать babel и webpack с небольшим опытом.

В этой задаче я точно следовал этой документации https://ant.design/docs/react/getting-started, и все равно получаю ошибку

Ответы [ 2 ]

0 голосов
/ 09 марта 2019

В конце концов, я использовал CSS, в конфигурационном файле веб-пакета добавьте: 

{
use: ['style-loader', 'css-loader'],
test: /\.css$/
}
0 голосов
/ 08 марта 2019

Вам не нужно импортировать antd css вверху App.js. Я также считаю, что в плагине babel style должно быть установлено css в файле конфигурации babel (в любом случае так настраивается наш файл конфигурации!). 

[
    'import',
    {
        'libraryName': 'antd',
        'style': 'css'
    }
]

Наш меньший загрузчик также имеет для javascriptEnabled значение true: 

test: /\.less$/,
use: [{
    loader: 'style-loader' // creates style nodes from JS strings
},
{
    loader: 'css-loader' // translates CSS into CommonJ
},
{
    loader: 'less-loader', // compiles Less to CSS
    options: {
        javascriptEnabled: true
    }
}]
...