Vue2.0 心法 ==> 第六层：vue2.0 中使用sass语法

1.第一步当然是安装

npm install node-sass --save-dev
npm install sass-loader --save-dev

或

cnpm install sass-loader node-sass vue-style-loader --D

2.然后去修改配置文件webpack.base.conf.js

此文件位于build文件夹下

module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('media/[name].[hash:7].[ext]')
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                }
            },
            // 划重点：前面都是默认的配置，下面的需要你加上去
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            }
        ]
    }

3.使用

开始使用啦

// 注意，此处需声明lang="scss"和type="text/scss"
// 特别是type="text/scss"。
// 而有些人说可以加上rel="stylesheet/scss"，但是我试了没用，不知道为啥，我也没深究  0.0
<style lang="scss" type="text/scss" scoped>
    @import "./sass/style.scss";
    .background {
        background: #0f0f0f;
        opacity: 0.4;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        width: 100vw;
        height: 100vh;
        .text{
            color: #f00
        }
    }
</style>