vue项目全局引入样式的几种方式

刚接触web开发，以此记录方便后续查看。

vue样式引入存在多种方式，有时候看代码样式从何而来，不得而知，在短暂接触后了解到了有多种引入方式，如有错误欢迎万能的网友指正：

1.个人认为是最为简单方便的引入方式（main.js引入）：

   // 全局css

   import "./styles/global.scss";

2.vue.config.js文件引入：

   module.exports = {

       css: {

          loaderOptions: {

          // 给 sass-loader 传递选项

         sass: {

          data: `@import "@/styles/index.scss";`

         }

      }

    }

  }

在index.scss中可以引入多个样式文件：

@import "./custom.scss";

@import "./mixin/index.scss";

3.index.html引入：

 <link rel="stylesheet" href="./static/css/global.css">

4.app.vue style引入:

       <style>

      @import './style/css/global.css'; /*引入公共样式*/

     </style>

5. vue中的build/webpack.base.conf.js：

   这里只能算是别名修改，但在我们使用的时候因为无法容易产生疑惑特此添加：

   

module.exports = {
   
   resolve: {
     extensions: ['', '.js', '.vue', '.scss'],  //自动解析确定的拓展名,使导入模块时不带拓展名
     fallback: [path.join(__dirname, '../node_modules')],
     alias: {  // 创建import或require的别名，一些常用的，路径长的都可以用别名
       'vue$': 'vue/dist/vue',
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components'),
       'scss_vars': path.resolve(__dirname, '../src/styles/vars.scss')
     }
   }
}

6.引入less、sass全局变量，build/utils.js中：

scss: generateLoaders('sass')

详情参照：https://blog.csdn.net/qq_27709465/article/details/79396982

less引入：https://blog.csdn.net/u014292161/article/details/79193381