问题标签 [icss]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
typescript - 在 Next.js 中导入 sass :export varaiables
在我的 Next.js 应用程序中,我包含一个接受主题颜色作为参数的组件。
我已经定义了 sass 变量
pages/index.tsx
我喜欢导入
然后我可以(理论上)color.primary
在我的组件中使用。
在 IDE 中,我收到 ts 错误:Cannot find module '../styles/_variables.scss' or its corresponding type declarations.
我的 next.config.js 文件看起来像这样
如果我直接使用导入工作导入 scss import '../styles/global.scss'
,但当然它们没有定义为我可以评估的变量。
node.js - 如何让 SCSS 变量做出反应
我关注了这篇文章如何在我的 React 组件中使用 SCSS 变量,或者这个React 和 SCSS 从 scss 导出一个变量以做出反应以在我的反应应用程序中获取 scss 变量,但它不起作用。
myvar.scss文件:
App.js文件:
div 背景是红色的,所以 myvar.scss 正在工作。但是variables
是一个空对象。
(反应版本:17.0.1)
node_modules\react-scripts\config\webpack.config.js
javascript - 如何在 js 代码(nodejs 服务器)中获取 SCSS 变量?
从这个博客文章示例https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript,我试图在我的 js 代码中获取 scss 变量,但我没有设法做到这一点。
index.js文件
变量.scss文件
webpack.config.js文件
package.json文件中的依赖项
编译:npx webpack
输出:
在 Web 控制台中,该对象variables
是空的,当然,我不能使用variables.myvar
.
webpack.config.js 中是否存在配置问题?我试图尽可能地简化它。所有 node_modules 都是最新的,npm 版本是 6.14.9。
感谢帮助。
reactjs - 如何将 scss 文件中的变量导入 react/next.js 组件
我正在制作一个 next.js 项目,我在 .scss 文件中有我的媒体查询断点,我的组件中也实现了一些媒体查询。我想在我的组件中使用这些 scss 变量,这样我就可以只更改一个文件来更改应用程序的逻辑。这样的事情可能吗?能否将 scss 变量导入 next.js 中的组件中?
javascript - SCSS :root 部分与 :export
我有一个test.module.scss
文件,其中存储了颜色、排版等的所有变量。我希望能够在react
组件中使用它。问题是文件:root
在顶部可以定义变量,它看起来像这样:
我希望能够在:export
这里使用我的反应组件中的这些颜色。如何在此处添加它以免破坏代码?我试过了:
或者
甚至:
或其他一些情况,:root + :export
等等。但没有任何效果按预期工作,变量无法从反应组件访问,或者它们不可导出。它的导出方式是什么?我知道我可以:export
在 scss 文件的末尾添加并再次将所有变量放在那里,但它们会加倍,这不是我想要使用的方式。
sass - Rollup - 允许在 js 中导入 scss 文件中的 :export 语句
我们有一个使用 Rollup 构建的 Vue 组件库。开发处于早期阶段,但到目前为止一切都运行良好,除了这一点:我们无法从 scss 文件中导出 SASS 变量并将它们导入到 js 文件中。我们习惯于使用:export
Webpack 的语句来做到这一点sass-loader
。像这样的东西:
断点.scss
然后在任何 js 文件中,我们可以导入样式表import breakpoints from '@/styles/settings/breakpoints.scss'
,其中breakpoints
将等于{ mobile: '360', tablet: '768', desktop: '1200' }
.
所以它适用于 Webpack,但我无法在没有额外配置的情况下使用rollup-plugin-styles使用 Rollup (我也尝试了 rollup-plugin-postcss,结果相同)。我在 Google 上也找不到与该问题相关的任何内容...
这是Rollup 编译的breakpoints.scss的结果:
所以它似乎想要注入有意义的样式,但仍然不是我想要的行为。是否已经有可能实现我正在寻找的东西,或者我需要为rollup-plugin-styles
添加支持做出贡献?
javascript - 如何将 sass 列表作为数组导出到 js 文件
我有一个带有 sass 变量的文件,它有一个像这样的列表:
所以我在同一个文件中写了以下内容来导出这个列表
由于某些原因,我需要将此列表导入 JS 文件。但是当我这样做时,我只得到一个大字符串而不是数组。
像这样:'"Id", "Phase", "Status", "Source", "Date"'
我应该如何导出 sass 列表以在 JS 中获取数组?