Vue 引入 SCSS

Vue 引入 SCSS

使用 vue init webpack 生成的 vue 模板项目中引入 scss 步骤：

1. vue init my-project
2. npm install node-sass@4 sass-loader@7 sass-resources-loader -D（兼容问题，需要使用旧版本的包） Similar to what @KostDM said, in my case it seems like sass-loader@11.0.0 doesn’t work with vue@2.6.12.
3. 修改 build/utils.js 文件如下

// scss: generateLoaders('sass')

scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/assets/styles/index.scss'),
  },
})

之后在 main.js 中可以不需要再引入全局 scss 文件：

// import '@/assets/styles/index.scss'

就此，大功告成！

需要注意一点，新版本的 node-sass 和 sass-loader 与 vue 不兼容，所以需要使用旧版本的包。

参考文档：

• vuejs-templates 官方文档
• vue 配置 sass、scss 全局变量
• TypeError: this.getOptions is not a function
• webpack-simple:Invalid CSS after