如何解决将 SCSS 导入为字符串
我正在尝试将一些 SCSS 导入到具有混合结果的 Javascript 文件中。我发现这有效:
style.styleString.scss
body {
background: #556;
}
.test {
&__child {
color: red;
}
}
index.js
import "./index.style"; // making sure that nothing we do breaks normal SCSS importing
const css = require("!!raw-loader!sass-loader!./style.stringStyle.scss").default;
console.log(css);
index.style.scss
正确编译为文件,style.stringStyle.scss
正确打印在控制台中。
我想做的是将这个加载器管道移动到我的 webpack 配置中。这就是我目前所拥有的:
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import path from "path";
const config = {
mode: "development",entry: {
"app": "./src/index.js",},output: {
path: path.resolve(process.cwd(),"dist"),filename: "[name].js",module: {
rules: [
{
test: /\.stringStyle.scss$/i,use: [
"raw-loader","sass-loader",],{
test: /\.scss$/i,use: [
{
loader: MiniCssExtractPlugin.loader,{
loader:"css-loader",options: {
url: false,resolve: {
extensions: [".js",".scss",".css"],devtool: "source-map",plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",}),};
export default config;
index.js
import "./index.style"; // making sure that nothing we do breaks normal SCSS importing
const css = require("./style.stringStyle.scss").default;
console.log(css);
使用此配置,一个空字符串会打印到控制台(index.style.scss
仍然可以正确呈现到文件中)。
我在这里做错了什么?我的印象是在导入中使用内联 !
语法就像在配置文件中排列加载器一样,但我显然遗漏了一些东西。
是否可以在我的 Webpack 配置中设置将 SCSS 文件加载为 CSS 字符串?
解决方法
这两个 SCSS 跟踪规则都应用于 style.stringStyle.scss
。向正常导入规则的测试正则表达式添加否定后视将确保仅选择正确的规则:
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import path from "path";
const config = {
mode: "development",entry: {
"app": "./src/index.js",},output: {
path: path.resolve(process.cwd(),"dist"),filename: "[name].js",module: {
rules: [
{
test: /\.stringStyle.scss$/i,use: [
"raw-loader","sass-loader",],{
test: /(?<!\.stringStyle)\.scss$/i,use: [
{
loader: MiniCssExtractPlugin.loader,{
loader:"css-loader",options: {
url: false,resolve: {
extensions: [".js",".scss",".css"],devtool: "source-map",plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",}),};
export default config;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。