Vue 实现全局使用sass, less变量

Bertha 。 2021-12-15 23:25 337阅读 0赞

首先   运行这行命令

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

在项目的build/utils.js中，找到

function generateLoaders (loader, loaderOptions){}

并在它的下面插入下面的方法

function resolveResource(name) {
          return path.resolve(__dirname, '../src/assets/css/' + name);
      }
      function generateSassResourceLoader() {
          var loaders = [
            cssLoader, 
            // 'postcss-loader',
            'less-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                  // it need a absolute path
                  resources: [resolveResource('basic.less')]
                }
            }
          ];
          if (options.extract) {
            return ExtractTextPlugin.extract({
              use: loaders,
              fallback: 'vue-style-loader'
            })
          } else {
            return ['vue-style-loader'].concat(loaders)
          }
      }

**注：**

**1、 resolveResource中的‘../src/assets/css’换成自己的less/sass文件的路径；**

**2、generateSassResourceLoader中 resources:\[resolveResource('basic.less')\]的basic.less换成自己的less/sass文件名**

**3、如果用的是sass，则把下面的中的‘less-loader’需要改为 'sass-loader'**

var loaders = [
            cssLoader, 
            // 'postcss-loader',
            'less-loader',  
            {
                loader: 'sass-resources-loader',
                options: {
                  // it need a absolute path
                  resources: [resolveResource('basic.less')]
                }
            }
          ];

然后在build/utils中，找到下面的代码

return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')

然后进行以下修改

less: generateLoaders('less') 替换成 less: generateSassResourceLodaer()

最后重新运行一下项目，ok

参考文章：https://blog.csdn.net/u014292161/article/details/79193381

转载于:https://www.cnblogs.com/hspl/p/10493340.html