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