在 Vue 中使用 Less、Sass/Scss、Stylus

旧版本（webpack.config.js）

安装

$ npm i less less-loader -D

配置

module.exports = {
    module: {
         reules: [
            {
                test: /\.less$/,
                use: 'style-loader!css-loader!less-loader'
            }
        ]
    }
};

若报错：Syntax Error: TypeError: this.getOptions is not a function，可能是 less-loader 版本过高导致的，需要降低版本（例如 npm i less-loader@5.0.0 -D）

新版本（vue.config.js）

安装

$ npm i less less-loader -D

不需要额外配置

开启 css-module

module.exports = {
    // ...
    css: {
        modules: true
    },
    // ...
};

参考 vue.config.js 配置文档：https://cli.vuejs.org/zh/config/#vue-config-js