vue-cli项目中的less loader

Question

我想在我的 vue-cli 创建的项目中使用一个 less 文件。

还有一个问题，如果这是最佳实践。 早些时候我在全球范围内添加了 webpack 并启动了一个观察者并添加了一个 webpack.config.js

这次我使用 vue-cli / vue ui 创建了项目，文档说我必须在执行此操作时使用 vue.config.js：

module.exports = {
css: {
    loaderOptions: {
        // pass options to sass-loader
        less: {
            // @/ is an alias to src/
            // so this assumes you have a file named `src/variables.scss`
            data: `@import "@/all.less";`
        }
    }
}
}

我在 src/all.less 中添加了文件，还尝试了 src/assets/less/all.less 并更改了配置文件中的路径。 两者似乎都不起作用。

Answer 1

对我来说，问题是当我在我的配置中只设置了 vanilla css 时，我将一个组件的语言设置为“less”：

<style lang="less" scoped>
//styling here
</style>

代替

<style lang="css" scoped>
//styling here
</style>

Answer 2

将 lang 更改为 CSS 对我有用。

<style lang="css" scoped>
.vueStyle{
color: orange;
}
</style>    

谢谢

Answer 3

如果您使用的是vue cli 3。 只需在vue文件中使用较少的权限，只需将lang设置为“ less”或“ scss”即可。 webpack端不应有其他配置：

<style lang="less">

@import'./less/index.less';