use the command
vue init webpack
after you have created the project, you want to add less to compile the style, and you can see that there is
in the build/utils.js configuration. // generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + "-loader",
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: "vue-style-loader"
})
} else {
return ["vue-style-loader"].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders("less"),
sass: generateLoaders("sass", { indentedSyntax: true }),
scss: generateLoaders("sass"),
stylus: generateLoaders("stylus"),
styl: generateLoaders("stylus")
}
}
configuration information, but the reality is that you cannot use less, and report
This dependency was not found:
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader /lib/style-compiler/index?{"vue":true,"id":"data-v-52992b45","scoped":false,"has InlineConfig":false}!less-loader?{"sourceMap":true}!../less/main.less in ./src/c omponents/searchOutlet.vue
To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"s ourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":tr ue,"id":"data-v-52992b45","scoped":false,"hasInlineConfig":false}!less-loader?{" sourceMap":true}!../less/main.less
but both vue-style-loader and css-loader have been configured,
npm install less --save-dev
npm install less-loader --save-dev
and loaded, how can I configure less correctly?