Как настроить один css файл для проектов vue -cli-3 с vue cli plugin ssr? - PullRequest
Новая
       117

Как настроить один css файл для проектов vue -cli-3 с vue cli plugin ssr?

0 голосов
/ 29 мая 2020

Ты мой последний шанс на победу! Я хочу объединить все мои фрагментированные файлы css в один, но даже если я попытаюсь извлечь: true; в файле vue .config это не работает. У меня всегда была дюжина кусков, если не больше :( Вот мой файл vue .config: 

const webpack = require('webpack')
const path = require('path')
const cssnano = require('cssnano')
const autoprefixer = require('autoprefixer')

const isProduction = process.env.NODE_ENV === 'production'

const routes = app => {
    app.use('/health', (_, res) => {
        res.end(
            JSON.stringify({
                status: 'OK',
            })
        )
    })
}

const skipRequests = [
    '/default.css.map',
    '/autotrack.js.map',
    '/detectizr.min.map',
]
const publicPath = process.env.CDN_PATH || '/'
console.log('Building app with publicPath : ', publicPath)

module.exports = {
    publicPath: publicPath,
    assetsDir: 'assets',
    css: {
        sourceMap: !isProduction,
        loaderOptions: {
            scss: {
                data: `$cdnPath: "${process.env.CDN_PATH || ''}";`,
            },
            postcss: {
                plugins: [
                    autoprefixer({
                        browsersList: ['last 2 versions', 'iOS >= 10'],
                    }),
                    cssnano({
                        preset: `default`,
                    }),
                ],
            },
        },
    },
    lintOnSave: !isProduction ? 'warning' : false,
    productionSourceMap: false,
    transpileDependencies: ['@akryum'],
    chainWebpack: webpackConfig => {
        // https://github.com/Akryum/vue-cli-plugin-ssr/issues/158
        const htmlSsrPlugin = webpackConfig.plugins.get('html-ssr')
        if (htmlSsrPlugin) {
            htmlSsrPlugin.store.get('args')[0].chunks = []
        }
        const svgRule = webpackConfig.module.rule('svg')
        svgRule.uses.clear()
        svgRule
            .use('vue-svg-loader')
            .loader('vue-svg-loader')
            .options({
                svgo: {
                    plugins: [{ removeViewBox: false }],
                },
            })
    },
    configureWebpack: webpackConfig => {
        ;(webpackConfig.optimization = {
            splitChunks: isProduction ? false : undefined,
        }),
            (webpackConfig.plugins = [
                ...webpackConfig.plugins,
                new webpack.DefinePlugin({
                    CDN_PATH: JSON.stringify(process.env.CDN_PATH || ''),
                }),
            ])
    },
    pluginOptions: {
        ssr: {
            // Function to connect custom middlewares
            extendServer: app => routes(app),
            extendContext: (_, res, process) =>
                (res.locals.startTime = process.hrtime.bigint()),
            skipRequests: req =>
                skipRequests.filter(toSkip => req.originalUrl.endsWith(toSkip))
                    .length > 0,
            error500Html: path.resolve(__dirname, './public/error500.html'),
            onRender: (res, context) => {
                // use to log time to load page in SSR
                const endTime = process.hrtime.bigint() - res.locals.startTime
                console.log(
                    'rendered page [%s] in %i ms',
                    context.url,
                    Number(endTime / BigInt(1000000))
                )
            },
        },
    },
}

Мог ли он появиться, потому что я импортирую свой css таким образом? 

    <template>
<div>lorem ipsum</div>
</template>


<style lang="scss">
@import '../../assets/sass/figimmo/components/ui-kit/mentions-inquiries';
</style>

Если да, не могли бы вы сказать мне, как лучше всего справиться с s css?

Спасибо!

...