vue引入全局less

• 1.設置全局樣式變量的好處：
• 2.以less為例（sass等同原理）
• • • 1.vue-cli2搭建的項目（1）
    • 2.vue-cli2搭建的項目（2）
    • 3.vue-cli3、vue-cli4
• 3.vue-cli2和vue-cli3的區別
• 4.vue-cli3和vue-cli4的區別
• 5.vue-cli3配置項目的三種辦法
• • 1.根目錄下創建vue.config.js
  • 2.運行 vue ui，然后打開瀏覽器進行可視化配置
  • 3.直接在依賴中找到并修改
• 6.分清vue版本和vue-cli版本

1.設置全局樣式變量的好處：

• 方便頁面樣式、風格盡量統一，便于多人合作開發
• 方便統一管理
• 減少重復工作

2.以less為例（sass等同原理）

安裝 sass-resources-loader 依賴：

cnpm install sass-resources-loader --save-dev

1.vue-cli2搭建的項目（1）

找到build文件夾下面的utils.js
exports.cssLoaders = function (options) {}中加入：
path.resolve(__dirname, ‘…/src/assets/styles/common.less’) //具體自己的路徑
return{} 中修改：
less: generateLoaders(‘less’) 改為 less: lessResourceLoader()

2.vue-cli2搭建的項目（2）

同樣找到其中的return的內容，less: generateLoaders(‘less’)改為：
less: generateLoaders(‘less’).concat({
loader: ‘sass-resources-loader’,
options: {
resources: path.resolve(__dirname, ‘…/src/assets/styles/common.less’)
}
})

3.vue-cli3、vue-cli4

搭建的項目需要自己在根目錄下創建vue.config.js，直接寫需要修改的配置即可：

module.exports = {
// 加載less加載器，路徑：./public/css/common.less
chainWebpack: config => {
const oneOfsMap = config.module.rule(‘less’).oneOfs.store
oneOfsMap.forEach(item => {
item
.use(‘sass-resources-loader’)
.loader(‘sass-resources-loader’)
.options({
// Provide path to the file with resources
resources: ‘./public/css/common.less’,
// Or array of paths
// resources: [’./path/to/vars.scss’, ‘./path/to/mixins.scss’]
})
.end()
})
}
}

3.vue-cli2和vue-cli3的區別

• vue-cli3是基于webpack4打造，vue-cli2是基于webpack3
• vue-cli3的設計原則是“0配置”，移除（隱藏）配置文件build和config等目錄
• vue-cli3提供了vue ui 命令，提供了可視化配置
• vue-cli3移除了static文件夾，新增了public文件夾，并且將index.html移動到public中
• 2.0啟動npm run dev，3.0啟動npm run serve

4.vue-cli3和vue-cli4的區別

vue-cli3和vue-cli4的區別

5.vue-cli3配置項目的三種辦法

1.根目錄下創建vue.config.js

module.exports = {}

2.運行 vue ui，然后打開瀏覽器進行可視化配置

3.直接在依賴中找到并修改

node_modules@vue\cli-service\webpack.config.js
node_modules@vue\cli-service\lib\Service.js

6.分清vue版本和vue-cli版本

1.cmd中 vue -V 查看的是vue-cli的版本（2、3、4），vue-cli2、vue-cli3可以創建vue2項目；vue-cli4可以創建vue2、vue3項目。
2.查看vue版本需要在package包中查看，或者在vue所在目錄進行cmd，輸入 npm list vue 查看

總結

以上是生活随笔為你收集整理的vue引入全局less实现全局变量的控制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。