vue在现在程序员圈中,已经是众所周知了,那么在我们去使用vue的过程中经常会使用强大的css预处理语言sass,那么在这个过程中我们有各种问题,下面我们就简单的介绍其中一个小编碰到的问题;
在使用scss中,我们定义了变量方便更改整个项目的配色,那么我们在main.js
中引入全局scss
文件,但直接引入scss
文件会报错。
那么针对此类问题我们有两种处理方式
import ../assets/css/common.scss;
这种方式很显然我们每个程序员都是不推荐的;
首先,需要安装一个开发插件:sass-resources-loader
npm i sass-resources-loader --save-dev
接着,修改我们脚手架中build/utils.js文件,修改scss的加载设置
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
修改为:
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass').concat({
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/common.scss')
}
}),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
之后重新启动项目,并且在main.js中引入公共的常量文件即可。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。