通过 Laravel Mix 将 SASS 编译到 Vue 组件

通过 Laravel Mix 将 SASS 编译到 Vue 组件

---

在为单页面应用配置 JavaScript 和 Sass 这篇教程中，我们已经为所有 Sass 资源构建了目录结构，我们可以将 Vue 组件的 Sass 资源放到这些目录中。

第一步：创建变量文件

_variables.scssresources/assets/sass/abstracts

$white: #FFFFFF;
$black: #111111;

$primary-color: #7F6D50;
$secondary-color: #FFBE54;
$highlight-color: #FFDBA0;
$dark-color: #7F5F2A;
$dull-color: #CCAF80;

现在我们拥有了一些可以在组件中使用的颜色了！如果你想要使用为非设计师提供的很酷的颜色工具，可以考虑 Adobe Color CC，当然类似的工具还有很多。

第二步：添加变量文件到 app.scss

resources/assets/sass/app.scssapp.scss

@import 'abstracts/variables';

app.scss

@charset "UTF-8";

/* ==========================================================================
    Builds our style structure
        https://sass-guidelin.es/#the-7-1-pattern
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Abstracts
 */
@import 'abstracts/variables';

@import 'node_modules/foundation-sites/assets/foundation.scss';

第三步：为 webpack.mix.js 添加别名

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules(?!\/foundation-sites)|bower_components/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: Config.babel()
                        }
                    ]
                }
            ]
        },
        resolve: {
            alias: {
                '@': path.resolve('resources/assets/sass')
            }
        }
    })
    .sass('resources/assets/sass/app.scss', 'public/css');

@resources/assets/sassmodule

第四步：添加 Navigation.vue 组件

做好以上配置之后，接下来是时候添加第一个 Vue 组件到 Roast 应用了。

resources/assets/js/components/global/Navigation.vueglobalNavigation.vue

<style>

</style>
<template>
    <nav class="top-navigation">

    </nav>
</template>
<script>
    export default {

    }
</script>

@

@import '~@/abstracts/_variables.scss';

NavigationNavigation.vue

<style lang="scss">
    @import '~@/abstracts/_variables.scss';
</style>
<template>
    <nav class="top-navigation">

    </nav>
</template>
<script>
    export default {

    }
</script>

Navigation.vue

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    nav.top-navigation{
        background-color: $white;
        height: 50px;
        border-bottom: 2px solid $dark-color;

        span.logo{
            border-right: 1px solid $dark-color;
            display: block;
            float: left;
            height: 50px;
            line-height: 50px;
            padding: 0px 20px 0px 20px;
            font-family: 'Josefin Sans', sans-serif;
            font-weight: bold;
            color: $dark-color;

            &:hover{
                color: white;
                background-color: $dark-color;
            }
        }

        ul.links{
            display: block;
            float: left;

            li{
                display: inline-block;
                list-style-type: none;
                line-height: 50px;

                a{
                    font-family: 'Lato', sans-serif;
                    font-weight: bold;
                    color: $black;

                    &:hover{
                        color: $dark-color;
                    }
                }
            }
        }

        div.right{
            float: right;

            img.avatar{
                width: 40px;
                height: 40px;
                border-radius: 40px;
                margin-top: 5px;
                margin-right: 10px;
            }
        }

    }
</style>

<template>
    <nav class="top-navigation">

        <router-link :to="{ name: 'home'}">
            <span class="logo">Roast</span>
        </router-link>

        <ul class="links">
            <li>
                <router-link :to="{ name: 'cafes' }">
                    Cafes
                </router-link>
            </li>
        </ul>

        <div class="right">
            <img class="avatar" :src="user.avatar" v-show="userLoadStatus == 2"/>
        </div>

    </nav>
</template>

<script>
    export default {
        // 定义组件的计算属性
        computed: {
            // 从 Vuex 中获取用户加载状态
            userLoadStatus(){
                return this.$store.getters.getUserLoadStatus;
            },

            // 从 Vuex 中获取用户信息
            user(){
                return this.$store.getters.getUser;
            }
        }
    }
</script>

至此我们已经在应用中添加了第一个 Vue 组件，该组件可以通过 Laravel Mix 将 Sass 资源编译进来。

项目源码位于 Github 上：nonfu/roastapp。