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如下:

注意，赋值不是等号

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

好用！贼好用。