Bagaimana untuk menulis kurang dalam vue

Cara menulis Less dalam Vue

Menggunakan Less dalam Vue.js ialah amalan biasa, yang membenarkan penggunaan Less style sheets dalam komponen Vue. Begini cara menggunakan Less dalam Vue:

1 Pasang pengkompil Kurang

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

2 Konfigurasikannya dalam vue.config.js

dalam vue.config.js. , tambahkan konfigurasi berikut: <code>vue.config.js 文件中，添加以下配置：

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

3. 创建 Less 样式表

在 src 目录下创建一个 .less 文件，例如 style.less：

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

4. 在 Vue 组件中引入 Less

在 Vue 组件的 <style> 标签中，使用 lang="less" 属性来指定该样式表是 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. 编译 Less

在开发过程中，可以使用 npm run serve 命令启动一个开发服务器，它将自动监听并编译 Less 文件。

在打包部署时，使用 npm run buildrrreee

🎜3 Cipta helaian Kurang gaya 🎜🎜🎜Buat fail .less dalam direktori src, seperti style. .less ：🎜rrreee🎜🎜4 Perkenalkan Less ke dalam komponen Vue🎜🎜🎜Dalam teg <style> komponen Vue, gunakan lang="less" Atribut untuk menyatakan bahawa helaian gaya adalah Kurang: 🎜rrreee🎜🎜5 Kurang Susun 🎜🎜🎜Semasa proses pembangunan, anda boleh menggunakan perintah npm run untuk memulakan pelayan pembangunan. , yang secara automatik akan mendengar dan menyusun fail Kurang. 🎜🎜Apabila membungkus dan menggunakan, gunakan perintah npm run build untuk membina projek, yang akan menyusun fail Less dan memasukkannya ke dalam binaan terakhir. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menulis kurang dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!