vue脚手架全局使用scss

vue脚手架全局引入scss的方法

首先我们在app根目录创建一个用于存放scss目录的文件夹然后创建一个全局的scss文件这里我叫scss

app

• styles
  • index.scss

然后我们使用npm来安装以下的代码,值得注意的是sass-loader 新版本等级太高webpack无法进行编译会报错不过按照以下安装是没有问题的

    cnpm install node-sass -D
    cnpm install sass-loader -D
    cnpm install sass-loader@7.3.1 -D

修改 build > utils.js 中一段代码将scss: generateLoaders('sass'),修改为如下，但是根据个人情况进行改写。

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/scss/index.scss') // 全局样式文件的路径
    }
  }
),

然后将index.scss引入到main.js里就可以进行使用了

import Vue from 'vue'
import App from './App'
import router from './router'
import './styles/index.scss'
Vue.config.productionTip = false