对于webpack来说是新手...我希望能够读取一个值,在这种情况下,尤其是从env
文件中的webpack.config.js
中读取sass
的值,所以我可以根据环境具有不同的CSS。
例如:
到目前为止,我一直专注于sass-loader,试图传递数据,但没有成功,运行$env
时npm run build:Debug
变量始终是未定义的(运行webpack --app=all --env=development
时)
这些是我拥有的文件:
webpack.config.js
const path = require("path");
const common = require("./.webpack/webpack.common.config");
const config = [];
function addAppConfig(app) {
app.module = common.module;
app.resolve = common.resolve;
config.push(app);
}
module.exports = (env, argv) => {
switch (argv.app) {
// Add new configs to below
case "a":
addAppConfig(aa);
break;
case "b":
addAppConfig(bb);
break;
case "c":
addAppConfig(cc);
break;
default:
case "all":
addAppConfig(xyz);
}
switch (env) {
case "local":
config.forEach(appConfig => {
// The "development" mode configuration option tells webpack to use its built-in development optimizations
// https://webpack.js.org/configuration/mode/#mode-development
appConfig.mode = "development";
appConfig.output.path = path.resolve(__dirname, "../dist");
appConfig.output.publicPath = "http://localhost:3000/dist";
appConfig.devtool = "inline-source-map";
appConfig.devServer = {
contentBase: path.resolve(__dirname, "./public"),
port: "3000",
watchContentBase: true
};
});
break;
case "development":
config.forEach(appConfig => {
// The "development" mode configuration option tells webpack to use its built-in development optimizations
// https://webpack.js.org/configuration/mode/#mode-development
appConfig.mode = "development";
appConfig.devtool = "inline-source-map";
});
break;
default:
case "production":
config.forEach(appConfig => {
// The "production" mode configuration option tells webpack to use its built-in production optimizations including minification etc.
// https://webpack.js.org/configuration/mode/#mode-production
appConfig.mode = "production";
appConfig.devtool = "cheap-source-map";
});
break;
}
return config;
};
webpack.common.config.js-在webpack.config.js中使用
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(s*)css$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css"
}
},
"extract-loader",
"css-loader",
"sass-loader"
]
},
{
test: /\.(png|jp(e*)g)$/,
use: [
{
loader: "url-loader",
options: {
// Convert images < 8kb to base64 strings
limit: 8000,
name: "images/[name].[ext]"
}
}
]
},
{
test: /\.(svg)$/,
use: [
{
loader: "url-loader",
options: {
// 80kb limit to avoid an IE11 display bug
limit: 80000,
name: "images/[name].[ext]"
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf)$/,
use: [
{
loader: "url-loader",
options: {
// Convert images < 8kb to base64 strings
limit: 8000,
name: "fonts/[name].[ext]"
}
}
]
}
]
},
resolve: {
extensions: [".js", ".jsx"]
}
};
最后: document.scss
.aside__left, .aside__right {
@if $env == 'development' {
background-color: red;
} @else {
background-color: green;
}
background-color: $desiredColor;
}
是否有一种方法可以从webpack配置中进行scss变量的映射/传递,或者基于环境的任何其他方式,都会生成不同的css?
答案 0 :(得分:3)
您可以使用以下方法将变量从webpack配置传递到scss文件:
{
loader: "sass-loader",
options: {
data: "$var1: " + yourVar1+ ";"
}
}
(c)https://github.com/webpack-contrib/sass-loader/issues/49#issuecomment-284131561
答案 1 :(得分:2)
这个问题已经回答并且是正确的,但是实际上我进行了很多搜索,以确定如何在SASS文件中使用它,并将SASS与webpack env连接。我想将其添加到我的答案中。
package.json
在这里,我们在webpack.config.js中添加了NODE_ENV变量。要将env添加到package.json,请参阅:webpackenvironmentconfiguration
"build:dev": "webpack --env.NODE_ENV=dev --config webpack.config.js --progress",
webpack.config:
现在,在此处添加您要根据环境使用的那些变量。例如,我想在我的背景图片动态网址中添加环境。
{
loader: "sass-loader",
options: {
data: "$var1: " + env.NODE_ENV + ";"
}
}
_variables.scss
您可以通过以下任意一种方式在.sass文件中使用它:
$image-url: "https://" + $var1 + ".mysite.net/images/ping.jpg"; or
$image-url: "https://#{$var1}.mysite.net/images/ping.jpg";
输出
您的输出网址将是这样的:
https://dev.mysite.net/images/ping.jpg