跳到主要内容

15-CSS中SASS文件打包和分离

装SASS打包的loader​

提示

这里有两种选择，可以把node-sass更换为dart-sass,更推荐使用dart-sass, 不过都一样，下面的配置不管使用node-sass,还是dart-sass，配置均相同。

依赖​

在项目目录下用npm安装两个包

sass-loader​

npm install --save-dev sass-loader 因为sass-loader解析sass样式，需要使用sass解析器，所以需要安装一个解析器，下面的node-sass或者dart-sass任选一个。 因为sass-loader依赖于node-sass，所以需要先安装node-sass

node-sass​

npm i install --save-dev node-sass

dart-sass​

npm i install --save-dev dart-sass

注意：在用npm安装时，这个sass-loader很容易安装失败，最好使用cnpm来进行安装。如果你安装一直报错，最好是把node_modules文件夹删除后，再重新安装。 编写loader配置

{
    test: /\.scss$/,
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "sass-loader" // compiles Sass to CSS
    }]
}

Sass文件的编写​

写好loader配置后，就可以愉快的编写sass文件拉，但是不要忘记把sass文件引入到entery.js中。

 $nav-color: #FFF;
 #nav {
     $width: 100%;
     width: $width;
     height:30px;
     background-color: $nav-color;
 }

都完成后，你就可以启动我们npm run server来查看效果了。

SASS文件分离​

{
    test: /\.scss$/,
    use: extractTextPlugin.extract({
        use: [{
            loader: "css-loader"
        }, {
            loader: "sass-loader"
        }],
        // use style-loader in development
        fallback: "style-loader"
    })
}