import必须写在每一个vue里面 写到main.js为啥不全局生效

Question

import Swal from 'sweetalert2'
import 'sweetalert2/src/sweetalert2.scss'
必须在到每一个vue文件里面才会生效

写在main.js为什么不生效呢

Answer 1

import Swal from 'sweetalert2'
// Vue 内使用 this.Swal 调用
Vue.prototype.Swal = Swal

// 全局调用
window['Swal'] = Swal

Answer 2

如果你指的是 sweetalert2，这是最基本的 ES 模块化问题了……

---

如果你指的是 sweetalert2/src/sweetalert2.scss，因为这是一个 scss 样式文件，需要特殊指定咋 loader，否则就会被忽略了。如果是一个 css 样式文件，就能自动识别了。

在 .vue 里可以用是因为有 <style lang="scss"> 来告诉 webpack 这是啥。

可以这么改：

// main.js
import '!style-loader!css-loader!sass-loader!sweetalert2/src/sweetalert2.scss'

// webpack.base.conf.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.sass$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test:/\.css$/,
                loader:'style-loader!css-loader',
            }
        ]       
    }           
}

P.S. 需要 npm install style-loader css-loader sass-loader