How to write less in vue

How to write Less in Vue

Using Less in Vue.js is a common practice, which allows the use of Less style sheets in Vue components. Here's how to use Less in Vue:

1. Install the Less compiler

<code>npm install --save-dev less less-loader</code>

2. Configure in vue.config.js

In the vue.config.js file, add the following configuration:

<code class="js">module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若有 less 文件中的路径指向其他 less 文件，需要指定 less 文件所在的路径
        lessOptions: {
          paths: [path.resolve(__dirname, 'src', 'less')]
        }
      }
    }
  }
};</code>

3. Create a Less style sheet

Create a .less file in the src directory, for example style.less:

<code class="less">body {
  background-color: #f5f5f5;
}</code>

4. Introduce it into the Vue component Less

In the <style> tag of the Vue component, use the lang="less" attribute to specify that the style sheet is Less:

<code class="vue"><template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<style lang="less">
@import "@/style.less";
.hello {
  color: red;
}
</style></code>

5. Compile Less

During the development process, you can use the npm run serve command to start a development server, which will automatically listen and compile Less document.

When packaging and deploying, use the npm run build command to build the project, which will compile the Less files and include them in the final build.

The above is the detailed content of How to write less in vue. For more information, please follow other related articles on the PHP Chinese website!