Как импортировать css файл в компонент далее. js? - PullRequest
Новая
       11

Как импортировать css файл в компонент далее. js?

0 голосов
/ 26 февраля 2020

Я пытаюсь импортировать файл css из библиотеки node_modules в мой компонент, но в результате я не получаю никаких ошибок и нуждаюсь в стилях в моем файле сборки

дальше. config. js

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

const withSass = require('@zeit/next-sass');
const withPlugins = require('next-compose-plugins');
const withAntd = require('./next-antd.config');
const lessToJS = require('less-vars-to-js');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');

require('dotenv').config();

const isDev = process.env.NODE_ENV !== 'production';
if(isDev) {
    process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;
}

const antdVariables = lessToJS(fs.readFileSync(path.resolve(__dirname, './assets/variables.less'), 'utf8'));

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
    require.extensions['.less'] = file => { }
}

const nextConfig = {
    webpack: config => {
        config.plugins.push(
            new FilterWarningsPlugin({
                // ignore ANTD chunk styles [mini-css-extract-plugin] warning
                exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
            }),
        );

        return config;
    },
    env
};

module.exports = withPlugins([
        [withSass, {
            cssLoaderOptions: {
                modules: true,
                importLoaders: 1,
                localIdentName: "[local]___[hash:base64:5]",
            },
        }],
        [withAntd, {
            cssModules: true,
            cssLoaderOptions: {
                sourceMap: false,
                importLoaders: 1,
            },
            lessLoaderOptions: {
                javascriptEnabled: true,
                modifyVars: antdVariables,
            },
        }],

], nextConfig);

next-antd.config. js

const cssLoaderConfig = require('@zeit/next-css/css-loader-config');

module.exports = (nextConfig = {}) => ({
    ...nextConfig,
    ...{
        webpack(config, options) {
            if (!options.defaultLoaders) {
                throw new Error(
                    'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade',
                );
            }

            const { dev, isServer } = options;
            const { cssModules, cssLoaderOptions, postcssLoaderOptions, lessLoaderOptions = {} } = nextConfig;

            // for all less in clint
            const baseLessConfig = {
                extensions: ['less'],
                cssModules,
                cssLoaderOptions,
                postcssLoaderOptions,
                dev,
                isServer,
                loaders: [
                    {
                        loader: 'less-loader',
                        options: lessLoaderOptions,
                    },
                ],
            };

            config.module.rules.push({
                test: /\.less$/,
                exclude: /node_modules/,
                use: cssLoaderConfig(config, baseLessConfig),
            });

            // for antd less in client
            const antdLessConfig = {
                ...baseLessConfig,
                ...{ cssModules: false, cssLoaderOptions: {}, postcssLoaderOptions: {} },
            };

            config.module.rules.push({
                test: /\.less$/,
                include: /node_modules/,
                use: cssLoaderConfig(config, antdLessConfig),
            });

            // for antd less in server (yarn build)
            if (isServer) {
                const antdStyles = /antd\/.*?\/style.*?/;
                const rawExternals = [...config.externals];

                config.externals = [
                    (context, request, callback) => {
                        if (request.match(antdStyles)) {
                            return callback();
                        }

                        if (typeof rawExternals[0] === 'function') {
                            rawExternals[0](context, request, callback);
                        } else {
                            callback();
                        }
                    },
                    ...(typeof rawExternals[0] === 'function' ? [] : rawExternals),
                ];

                config.module.rules.unshift({
                    test: antdStyles,
                    use: 'null-loader',
                });
            }

            if (typeof nextConfig.webpack === 'function') {
                return nextConfig.webpack(config, options);
            }

            return config;
        },
    },
});

Также я пытаюсь импортировать @ zeit / next- css и добавьте его с помощью плагинов, но это также не дало желаемого эффекта

Я знаю, что есть возможность добавить стили к макету in, но я хотел бы знать, как это сделать внутри Реактив компонента в следующем. js проекте

...