在vue项目中全局引入scss文件

第一步：首先安装依赖包：

npm install --save-dev sass-loader

npm install --save-dev node-sass      //sass-loader依赖于node-sass

npm install sass-resources-loader --save-dev     //全局引入scss文件的依赖包

第二步：找到build/utils.js，找到 scss: generateLoaders('sass')，修改如下：

scss: generateLoaders('sass').concat(

      {

        loader: 'sass-resources-loader',

        options: {

          resources: path.resolve(__dirname, '../src/common/scss/index.scss')

        }

      }

    ),

如图所示：

修改成下图

完成这步后，可以在main.js中 import ‘./common/csss/index.scss’   此路径按照你自己的scss文件存放填写

最后npm run dev ,项目跑起来后，引进的scss文件里面的样式，变量等都可以在组件中使用了。