Vue

作者: a6dba64ebe2a | 来源:发表于2020-03-10 17:33 被阅读0次

Vue<scss的使用和全局配置>

参考文章链接:vue<scss的使用和全局配置>
.scss和.css相比较有很大的优势,其中一个就是可以通过$定制全局的样式,函数等。
具体请参考sass官网 https://www.sass.hk/

首先你需要 npm install --s node-sass sass-loader

  1. 设置一个控制全局的.scss文件


    在这里插入图片描述
  2. 在你需要用到的页面引入


    在这里插入图片描述

    需要注意的是,这种写法需要你在每个用到的页面都必须这样引入(直接在main.js引入 theme.scss是没有用的),所以教给大家一个配置全局scss的一个方法。

  3. 首先你需要 npm install --s sass-resources-loader

  4. 在build目录下找到utils.js文件


    在这里插入图片描述

    具体放置位置如图:


    在这里插入图片描述
    具体代码如下:
function generateSassResourceLoader() {
    let loaders = [
      cssLoader,
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          // 多个文件时用数组的形式传入,单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
          resources: path.resolve(__dirname, '../src/assets/styles/global.scss')
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

重新 npm run dev 一下,然后就可以了。就不需要再在每个页面引入那个global.scss文件了

相关文章

网友评论

      本文标题:Vue

      本文链接:https://www.haomeiwen.com/subject/udrgdhtx.html