06 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 [email protected] doesn't work with [email protected]. - 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 不兼容,所以需要使用旧版本的包。参考文档:
最近更新 9mo ago