Links

06 Vue 引入 SCSS

使用 vue init webpack 生成的 vue 模板项目中引入 scss 步骤:
  1. 1.
    vue init my-project
  2. 2.
    npm install node-sass@4 sass-loader@7 sass-resources-loader -D(兼容问题,需要使用旧版本的包)
    Similar to what @KostDM said, in my case it seems like [email protected] doesn't work with [email protected].
  3. 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-sasssass-loader 与 vue 不兼容,所以需要使用旧版本的包。
参考文档: