vue 把＜style scoped lang=“less“＞单独写成less文件再导入使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 把＜style scoped lang=“less“＞单独写成less文件再导入使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 npm

npm install less-loader --save-dev

2 创建一个单独的 Less 文件，例如 app.less

<style scoped lang="less">
@import url('./app.less');
</style>

3 在 app.less 文件中，编写 Less 样式代码

.container {
  width: 500px;
  margin: 0 auto;
}

select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

4 在 Vue 实例中引入该 Less 文件

import Vue from 'vue';
import App from './App.vue';
import './app.less';

new Vue({
  el: '#app',
  render: h => h(App),
});

5 vue.config.js 文件中添加你所需的 Webpack 配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.less$/,
          use: [
            {
              loader: 'vue-style-loader',
            },
            {
              loader: 'css-loader',
            },
            {
              loader: 'less-loader',
            },
          ],
        },
      ],
    },
  },
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
})