Webpack: JS到SASS和CSS的转换
Webpack: JS到SASS和CSS的转换
提问于 2020-01-30 08:03:27
我的目标是从Javascript文件创建一个SASS和CSS文件，其中包含我迭代时使用的所有主题和颜色。
我有一个包含两个对象的themes.js文件，这两个对象保存了我所有的颜色模式：colorPalette和themes。我正在将这些对象导入我的入口点(./src/index.js)。入口点使用JS遍历所有调色板和主题，以创建一个大的SASS字符串。使用HtmlWebpack插件，我可以将其打印到DOM。但是，我的主要目标是使用此输出字符串创建一个SASS文件。我已经使用了sass、样式和css加载器以及miniCssExtract和textExtract插件来尝试将这个字符串捕获为SASS文件。我已经尝试了相当多的配置(添加多个插件，删除它们，等等)，但以下是我的最新迭代：
var config = {
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['style-loader','css-loader', 'sass-loader']
})
}
]
}
}
var clientConfig = ({ mode, presets } = { mode: "production", presets: [] }) => {
return webpackMerge(
{
mode,
plugins: [ new HtmlWebpackPlugin()]
},
modeConfig(mode),
presetConfig({ mode, presets }),
Object.assign({}, config, {
name:"main",
entry: "./src/index",
output: {
path: path.resolve(__dirname +'dist'),
filename: "bundle.js"
}
})
)
}
module.exports = [clientConfig]我知道webpack输出的文件是运行时文件，它是一个由多个模块组成的数组，这些模块被包装起来了，但是我不知道如何(或者我是否应该)使用它来生成我的SASS文件。我觉得我有点不知道如何接近webpack，所以我非常感谢你的帮助。
回答 1
Stack Overflow用户
发布于 2020-01-31 12:02:19
你可以参考我的代码here
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
}
]
}然后将文件导入到js中，如下所示
import "style.scss";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59977345
复制相关文章
相似问题
腾讯云开发者
