0
내 4 각도 앱에서 테마 스타일을 지원하는 가장 좋은 방법을 찾고 있습니다. SASS 변수를 사용하고 테마 설정은 4 가지 SASS 변수 (기본 및 보조 색상, 배경 이미지 및 어두운/밝은 주제의 전환)에 의존합니다.production에서 angular4 앱을 다시 컴파일하는 방법은 무엇입니까?
이제 앱에서 테마를 동적으로 변경하고 싶습니다. 지금 당장이 있습니다 :
저는 sass-vars-loader 라이브러리 (https://github.com/epegzz/sass-vars-loader)를 사용하고 있습니다. 앱 빌드 중에 JSON 파일의 sass 변수를 내 _vars.scss에로드합니다. 그리고 구성 요소에서 해당 변수를 변경하면 JSON 파일에 새 값을 쓰고 해당 파일의 변경 사항을보고있는대로 앱을 다시 컴파일합니다.
이것은 개발 중에 _vars.scss에 성공적으로 새 변수를 다시 컴파일하고로드하는 것입니다.하지만 제 질문은이를 어떻게 프로덕션에서 지원할 수 있는지입니다.
webpack을 구성 할 수 있으려면 webpack.config.js를 $ng eject으로 꺼 냈으므로 더 이상 angular-cli 명령을 사용하지 마십시오.
// webpack.config.js
...
{
"test": /\.scss$|\.sass$/,
"use": [
"style-loader",
{
"loader": "css-loader",
"options": {
"sourceMap": false,
"importLoaders": 1
}
},
{
"loader": "postcss-loader",
"options": {
"ident": "postcss",
"plugins": postcssPlugins
}
},
{
"loader": "sass-loader",
"options": {
"sourceMap": false,
"precision": 8,
"includePaths": []
}
},
// Reads Sass vars from JSON
{ loader: "@epegzz/sass-vars-loader", options: {
files: [
path.resolve(__dirname, 'src/theme.json')
]
}
}
]
},
...
"devServer": {
setup: function(app) {
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.post("/theme", function(req, res) {
var payload = req.body,
theme;
fs.writeFileSync('src/theme.json', JSON.stringify(payload, null, 3));
res.send("Success");
});
},
}
나는 내 응용 프로그램을 제공하고 변화를 볼 것입니다 정의 Node.js를 서버를 만들 필요가 가정의 웹팩-dev에 서버 개발하는 동안하고있다처럼 jsut.
감사합니다. 감사합니다.
webpack으로 모든 작업을 수행 할 필요가 없습니다. https://stackoverflow.com/a/40612500/2398593 – Maxime
@Maxime 모든 응용 프로그램에서 sass 변수를 사용하고 있으며, 테마 변수는 동적이며 모든 색상이 될 수 있습니다. 응용 프로그램이 이미 컴파일 된 후 _vars.scss에 사용자가 선택한 값을 삽입하는 방법이 필요합니다. 당신이 제공하는 솔루션은 루트 구성 요소의 클래스를 확인하고 sass vars를 사용하여 모든 하위 구성 요소에서이를 수행해야합니다. – lginq
모든 하위 구성 요소에있는 것은 아닙니다. 그 점은 – Maxime