Sass를 포장하고 분리하는 방법은 무엇입니까? 사스를 포장하고 분리하는 방법 소개

이 글에서는 Sass를 패키징하고 분리하는 방법에 대한 정보를 제공합니다. Sass를 포장하고 분리하는 방법에 대한 소개는 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

서문: package.json은 npm의 패키지 관리 구성 파일이고, webpack.config.js는 webpack의 기본 구성 파일이며, webpack.config.js를 더 명확하게 보이도록 제가 추출한 webpack.plugin.js입니다. 추출된 구성 콘텐츠 중 일부는 이름에서 알 수 있듯이 플러그인의 구성을 추출합니다.

node_modules는 npm install 실행 후 종속 패키지가 설치되는 디렉터리입니다.

패키징 및 별도의 sass

프로젝트 디렉터리에 두 개의 패키지를 설치합니다.

npm install –save-dev node-sass

npm install –save-dev sass-loader

설치에 실패하면 변경해야 합니다. node_modules 디렉터리를 삭제하고 npm 설치로 디렉터리를 다시 설치한 후 이 두 패키지를 다시 설치하세요

로더 구성 작성:

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    }]}
src/index.html中插入一层关于sass的区块
<div id="sassLearn"></div>
Sass文件的编写：在src/css里面新建一个sassLe.scss文件
$nav-color:#fff;
#sassLearn
{    
$width:100%;    
width:$width;    
height:30px;    
background-color:$nav-color
;}

在src/entry.js里面引入sass
import sass from ‘./css/sassLe.scss’
webpack 后 npm run server查看效果（但是此时#sassLearn是打包到entry.js当中）
修改webpack-config.js里面的sass配置中的use
use:extractTextPlugin.extract({    
use:[{      
loader:'css-loader'    },
{      
loader:'sass-loader'    
}],    
fallback:'style-loader'  
})

패키징을 위한 dist 폴더 webpack을 삭제하고 #sassLearn 스타일이 있는지 확인하세요. dist/css/index.css 설정(즉, sass와 js 파일이 분리되었습니다)

npm 실행 서버 브라우저를 열어서 효과를 확인하세요

관련 권장 사항:

덜 패키징하고 분리하는 방법은 무엇입니까? 포장 및 분리 덜하는 방법 소개

HTML로 이미지를 포장하는 방법은 무엇인가요? HTML 이미지를 패키징하는 방법

위 내용은 Sass를 포장하고 분리하는 방법은 무엇입니까? 사스를 포장하고 분리하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!