[Vue]Vue全局引入sass文件-使用全局变量和mixin

[BowenZ]

更新：新增vue cli 3.x项目的配置，请见最后

0.前言

在Vue项目中通常需要使用sass定义一些全局变量，如主题色、统一边距，或者需要定义全局的mixin，但是官方的vue webpack模板并不提供这样的功能，要想实现这些功能，只能在每个组件中import全局scss文件，非常不方便。

下面给出能通过修改webpack配置实现全局引入sass文件方法：

1.安装sass-resources-loader

npm install -D sass-resources-loader

2.修改build/util.js配置

在util.js中exports.cssLoaders方法return前边加入如下代码：

(其中scss文件路径需要根据自己项目情况修改为要添加的路径)

  // 引入全局scss>>>
  function resolveResouce(name) {
    return path.resolve(__dirname, '../src/assets/sass/' + name);
  }

  function generateSassResourceLoader() {
    var loaders = [
      cssLoader,
      // 'postcss-loader',
      'sass-loader', {
        loader: 'sass-resources-loader',
        options: {
          // it need a absolute path
          resources: [resolveResouce('global.scss')]
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
  // <<<

将return中的sass和scss改为如下代码：

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

3. 重启服务

重启之后，在每个组件中就都可以使用全局的变量和mixin了

4. Vue cli 3.x项目中的配置

cli3中全局引入scss文件就很简单了，只需在vue.config.js中增加如下配置：

module.exports = {
  // ...
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/styles/global.scss";'
      }
    }
  }
  // ...
}

[DorisOu]

@BowenZ 我尝试了这个方法，没有生效。组件中还需要引入这个global.scss么？组件还要使用其他scss，应该怎么做？

[BowenZ]

@BowenZ 我尝试了这个方法，没有生效。组件中还需要引入这个global.scss么？组件还要使用其他scss，应该怎么做？

@DorisOu 用这种方式就不需要在组件中再次引入了，如果没有生效，看看这个路径有没有写对

function resolveResouce(name) {
    return path.resolve(__dirname, '../src/assets/sass/' + name); //这个路径
  }

还有调用时候的这个文件名：

resolveResouce('global.scss')

这个是针对vue cli 2.x项目的配置，如果你是vue cli 3.x生成的项目，就不需要用这种方法了

我更新了上面的内容，如果是cli3.x可以看一下

[xiongshj]

感谢你，这个方法解决了我的问题！

[xiongshj]

感谢你，这个方法解决了我的问题！