A list,

  • When introducing styles, variables need to be introduced in each file. In order to avoid the problem of introducing variables separately for each use, style-resources-loader is adopted.

  • To ensure the specified CSS parser plug-in installation (less and less – loader | stylus, stylus – loader…). After.

  • In this example, create a reset.less (the file name is optional) and the path is @/assets/reset.less.

  • Example of single page import:

    <style lang="less" scoped> // @import "@/assets/reset.less"; @import ".. /assets/reset.less"; .content { color: @dzm-color; } </style>Copy the code

  • Simply introducing the import ‘@/assets/reset.less’ in the main.js file will not achieve the global style, which is a mistake.

  • You do not need to import the import ‘@/assets/reset.less’ in the main.js file for the following two configurations.

2. Configuration Mode 1

  • Install style – resources – loader

    $ npm i style-resources-loader
Copy the code

  • Install the vue – cli – plugin – style – resources – loader

    $ npm i vue-cli-plugin-style-resources-loader
Copy the code

  • Create vue.config.js and add the following configuration

    const path = require('path'); Module. exports = {// install style-resources-loader and vue-cli-plugin-style-resources-loader pluginOptions: {'style-resources-loader': {preProcessor: 'less', // All three patterns are available. ["./src/assets/reset1.less", "./src/assets/reset2.less"] // patterns: "./src/assets/reset.less" patterns: [// The path can be written either way. The @ sign cannot be used for the path. Resolve (__dirname, './ SRC /assets/reset.less') path.resolve(__dirname, 'SRC /assets/reset.less')]}}};Copy the code

3. Configuration Mode 2

  • Install style – resources – loader

    $ npm i style-resources-loader
Copy the code

  • Create vue.config.js and add the following configuration

    Module.exports = {// setup: style-resources-loader chainWebpack: (config) => { const oneOfsMap = config.module.rule("less").oneOfs.store; oneOfsMap.forEach(item => { item .use("style-resources-loader") .loader("style-resources-loader") .options({ // // Patterns: ["./ SRC /assets/reset1.less", "./ SRC /assets/reset2.less"] Patterns: ["./ SRC /assets/reset2.less"] "./src/assets/reset.less" }) .end() }) } };Copy the code

Four, choose one of the above two ways

  • Once configured, rerun the project for testing

    <template> <! Dzm-test </div> </template> <script> export default {} </script> <style lang="less" Scoped > // use the styles. content {margin-top: 50px; margin-top: 50px; color: @dzm-color; } </style>Copy the code