stylus 设置全局样式_vue设置全局样式变量 less

1.第一步：

npm install sass-resources-loader --save-dev

2.然后在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码：

function lessResourceLoader() {

var loaders = [

cssLoader,

'less-loader',

{

loader: 'sass-resources-loader',

options: {

resources: [

path.resolve(__dirname, '../src/assets/styles/common.less'),

]

}

}

];

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader'

})

} else {

return ['vue-style-loader'].concat(loaders)

}

}

path.resolve(__dirname, '../src/style/style.less')路径改成自己对应的文件

然后后面将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()

结果如下

exports.cssLoaders = function (options) {

options = options || {}

const cssLoader = {

loader: 'css-loader',

options: {

sourceMap: options.sourceMap

}

}

var postcssLoader = {

loader: 'postcss-loader',

options: {

sourceMap: options.sourceMap

}

}

function lessResourceLoader() {

var loaders = [

cssLoader,

'less-loader',

{

loader: 'sass-resources-loader',

options: {

resources: [

path.resolve(__dirname, '../src/style/style.less'),

]

}

}

];

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader'

})

} else {

return ['vue-style-loader'].concat(loaders)

}

}

// generate loader string to be used with extract text plugin

function generateLoaders (loader, loaderOptions) {

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

if (loader) {

loaders.push({

loader: loader + '-loader',

options: Object.assign({}, loaderOptions, {

sourceMap: options.sourceMap

})

})

}

// Extract CSS when that option is specified

// (which is the case during production build)

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader'

})

} else {

return ['vue-style-loader'].concat(loaders)

}

}

// https://vue-loader.vuejs.org/en/configurations/extract-css.html

return {

css: generateLoaders(),

postcss: generateLoaders(),

less: lessResourceLoader('less'),

sass: generateLoaders('sass', { indentedSyntax: true }),

scss: generateLoaders('sass'),

stylus: generateLoaders('stylus'),

styl: generateLoaders('stylus')

}

}

修改完配置文件记得重启服务器：npm run dev

ok, style.less如下:

修改完配置文件记得重启服务器：npm run dev

ok, style.less如下:

@sidebar:240px;

@headerHeight:65px;

@bodyMinWidth: 700px;

注意，赋值不是等号

在组件中，就可以使用全局变量了。

.content {

background:red;

height:auto;

margin-left: @sidebar;

width: calc(100%-@sidebar);

}

好用！贼好用。

02 uni-app框架学习：设置全局样式统一每个页面的背景颜色

1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page

WPF——如何为项目设置全局样式。

在项目中,需要为所有的Button.TextBox设置一个默认的全局样式,一个个的为多个控件设置相同的样式显然是不明智的.在WPF中可以通过资源设置全局样式,主要有俩种方法: 1.第一种就是先写好按钮 ...

Vue设置全局的方法和样式

vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

Vue 设置style样式

1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式