1. 程式人生 > >如何在vue中全域性引入stylus檔案的公共變數

如何在vue中全域性引入stylus檔案的公共變數

新建 一個公共的stylus公共檔案新增公共變數,如下:

修改下圖圈出的檔案:

具體的修改如下:

// 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) } } var stylusOptions = { import: [ path.join(__dirname, "../src/assets/css/public/var.styl"), // 全域性變數檔案 檔案字尾名為.styl ] } // https://vue-loader.vuejs.org/en/configurations/extract-css.html
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus',stylusOptions), styl: generateLoaders('stylus',stylusOptions) }

 這裡要特別注意檔案字尾名是.styl而不是.stylus哦!

然後就可以在.stylus檔案裡面使用var.styl裡面定義的變量了: