下面我就为大家分享一篇基于vue中css预加载使用sass的配置方式详解，具有很好的参考价值，希望对大家有所帮助。
1.安装sass的依赖包
npm install --save-dev sass-loader
登录后复制
//sass-loader依赖于node-sassnpm install --save-dev node-sass
登录后复制
2.在build文件夹下的webpack.base.conf.js的rules里面添加配置，如下红色部分
立即学习“前端免费学习笔记（深入）”；
{ test: /.sass$/, loaders: ['style', 'css', 'sass'] }登录后复制
// module用来解析不同的模块 module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /.vue$/, // 也就是说，对.js和.vue文件在编译之前进行检测，检查有没有语法错误'eslint-loader' // enforce: 'pre'选项可以确保，eslint插件能够在编译之前检测，如果不添加此项，就要把这个配置项放到末尾，确保第一个执行 // 对vue文件使用vue-loader，该loader是vue单文件组件的实现核心，专门用来解析.vue文件的 loader: 'vue-loader', // 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件 options: vueLoaderConfig }, { test: /.js$/, // 对js文件使用babel-loader转码,该插件是用来解析es6等代码 loader: 'babel-loader', // 指明src和test目录下的js文件要使用该loader include: [resolve('src'), resolve('test')] }, { test: /.(png|jpe?g|gif|svg)(?.*)?$/, // 对图片相关的文件使用 url-loader 插件，这个插件的作用是将一个足够小的文件生成一个64位的DataURL // 可能有些老铁还不知道 DataURL 是啥，当一个图片足够小，为了避免单独请求可以把图片的二进制代码变成64位的 // DataURL，使用src加载，也就是把图片当成一串代码，避免请求，神不神奇？？ loader: 'url-loader', options: { // 限制 10000 个字节一下的图片才使用DataURL limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/, // 字体文件处理，和上面一样 loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } }, { test: /.sass$/, loaders: ['style', 'css', 'sass'] } ] },
登录后复制
3.修改模板里面的style lang=”scss”;例如模板红色标记
登录后复制
<!-- 默认会被渲染成一个 `` 标签 --> 商品
评论
商家
import header from './components/header/header.vue'; // 加default表示对整个模块进行导出 export default{ components: { 'v-header': header } }; #indexContent { .tab{ display: flex; width:100%; height: 40px; line-height: 40px; .tab-item { flex: 1; text-align: center; a{ display:block; } } } }
登录后复制
4.npm run dev
5.效果
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
js中el表达式的使用和非空判断方法
js中el表达式的使用和非空判断方法
js中el表达式的使用和非空判断方法
以上就是基于vue中css预加载使用sass的配置方式详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2753390.html
