Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Question] Less imports @import '~@pkg/path/to/stylesheet.less' #135

Open
cmath10 opened this issue Sep 5, 2023 · 0 comments
Open

[Question] Less imports @import '~@pkg/path/to/stylesheet.less' #135

cmath10 opened this issue Sep 5, 2023 · 0 comments

Comments

@cmath10
Copy link

cmath10 commented Sep 5, 2023

Hello! I've noticed that this package uses https://www.npmjs.com/package/less for less file compilation. Also, compileStyle util doesn't support imports like

@import '~@pkg/path/to/stylesheet.less'

out of the box.

I'd like to know if this syntax support is planned or not. I use vue2-jest/vue3-jest & webpack and need to use syntax like that. I also have a workaround, but I'd love to get rid of it:

const path = require('path')
const less = require('less')

const logResultErrors = require('@vue/vue2-jest/lib/utils').logResultErrors

const MODULE_REQUEST_REGEX = /^[^?]*~/

class NodeModuleFileManager extends less.FileManager {
    supports (filename, currentDirectory, options, environment) {
        return MODULE_REQUEST_REGEX.test(filename)
    }

    supportsSync (filename, currentDirectory, options, environment) {
        return true
    }

    loadFile (filename, currentDirectory, options, environment) {
        const rest = [currentDirectory, options, environment]

        if (MODULE_REQUEST_REGEX.test(filename)) {
            return super.loadFile(filename.replace(MODULE_REQUEST_REGEX, ''), ...rest)
        }

        return super.loadFile(filename, ...rest)
    }
}

const compileStyle = require('@vue/component-compiler-utils').compileStyle

module.exports = {
    process: (content, filePath) => {
        const result = compileStyle({
            source: content,
            filePath,
            preprocessLang: 'less',
            preprocessOptions: {
                paths: [path.dirname(filePath), process.cwd()],
                plugins: [{
                    install (lessInstance, pluginManager) {
                        pluginManager.addFileManager(new NodeModuleFileManager());
                    },
                }],
            },
            scoped: false,
        })

        logResultErrors(result)

        return result.code
    },
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant