webpack은 sass 모듈 로딩을 어떻게 구성합니까? (상해)

이 글의 내용은 웹팩이 Sass 모듈 로딩을 어떻게 구성하는지 소개하는 것입니다. (상해). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

webpack으로 관리하는 프로젝트의 경우 sass를 사용하여 스타일을 정의하기를 원하며, 정상적으로 컴파일하려면 다음과 같은 구성을 해야 합니다. 여기서는 webpack 시작에 대해 이야기하지 않겠습니다. 소개 글로는 "Webpack 시작하기"를 추천합니다.

sass를 사용하려면 sass 종속성 패키지를 설치해야 합니다

//在项目下，运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

물론 스타일을 사용하는 경우 css-loader 및 style-loader도 필수 종속성 패키지입니다. 설치되어 있지 않으면 위와 같은 방법으로 설치할 수 있습니다

• css-loader를 사용하면 @import 및 url(...)과 같은 메서드를 사용하여 require() 기능을 구현할 수 있습니다.

• style-loader는 계산된 모든 스타일을 추가합니다.

two 이 조합을 사용하면 웹팩 패키지 JS 파일에 스타일 시트를 삽입할 수 있습니다.

다음은 webpack.config.js 파일 구성의 일부입니다.

var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
module.exports = {
    ....
    module: {
        loaders: [
            //解析.css文件
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style", 'css')
            },
            //解析.vue文件
            {
                test: /\.vue$/,
                loader: 'vue'
            }, 
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及<style lang="sass">...</style>声明的内部样式进行加载
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
            }
        ]
    },
    //.vue文件的配置，以下是为了在.vue文件中使用ES6语法（必须安装babel相关的依赖包），以及把使用css或sass语法的样式提取出来，如果不需要可以忽略
    vue: {
        loaders: {
            js: 'babel', 
            css: ExtractTextPlugin.extract("css"),
            sass: ExtractTextPlugin.extract("css!sass")            
        },
    },
    plugins: [
        new ExtractTextPlugin("style.css") //提取出来的样式放在style.css文件中
    ]
    ....
}

sass는 다음과 같이 사용됩니다. 예:

• 외부 스타일을 도입하면 다음 두 가지 작성 방법을 사용할 수 있습니다.

import '../../css/test.scss'
require('../../css/test2.scss');

• 사용 중

<style lang="sass">
     //sass语法样式
</style>

(.vue 파일)

위 내용은 webpack은 sass 모듈 로딩을 어떻게 구성합니까? (상해)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!