如何解决汇总未检测到 scss 文件的 @import 语法
我需要汇总来捆绑我的 sass 文件,例如变量、mixin 等。 index.scss 包含
@import "./scss/variables.scss";
和 index.ts 包含
import "./index.scss";
export { Button } from "./components/Button";
但是,bundle 没有来自 variables.scss 的任何代码,如果我在 say Button.scss 中使用变量,我会收到此错误
[!] (plugin postcss) Error: Undefined variable: "$shady-lady".
我的汇总配置
export default {
input: "./src/index.ts",output: [
{
file: packageJson.main,format: "cjs",sourcemap: true,},{
file: packageJson.module,format: "esm",],plugins: [
resolve(),cleaner({
targets: ["./lib"],}),postcss({
extract: true,modules: true,minimize: true,plugins: [postcssImport(),autoprefixer()],extensions: [".scss"],peerDepsExternal(),commonjs(),typescript({
exclude: ["**/*.stories.tsx","**/*.test.tsx"],};
解决方法
所以问题不在于@import 语法。这是汇总未处理全局资源文件。
解决方案是从 index.ts 中删除导入 './index.scss' 并直接使用这个包
https://github.com/hytromo/rollup-plugin-postcss-retain-sass-data#readme
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。