标签: postcss-import

我postcss-import用来处理我的进口，并cssnano缩小。在我的 Webpack 配置中，我一直在使用以下设置css-loader...

{
  loader: 'css-loader',
  options: {
    url: false,
    import: false,
    minimize: false,
    importLoaders: 1,
    souceMap: true,
  }
}

...但是当我删除所有内容时似乎仍然可以正常加载，所以现在我post-css之前只有style-loader. 我可以安全地css-loader从我的 css 构建中省略，还是它提供了一些其他必要的功能？我还没有看到一个webpack.config.js不使用的文件css-loader，所以我想在这里保持谨慎！:)

我正在尝试将 webpack 与 postcss 一起使用来导入包含我的 css 自定义变量的 theme-variables.css 文件。

//theme-variables.css
:root {
    --babyBlue: blue;
}

基本上我希望任何导入主题变量的 css 能够访问这些 css 自定义属性并使用 postcss-css-variables 解析为静态值。

//style.css
@import "./theme-variable.css";

div {
    display: flex;
    color: var(--babyBlue);
}

变成

//main.css
div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: blue;
}

但是我不断收到 webpack 错误 variable --babyBlue is undefined and used without a fallback

main.js 最终看起来像这样：

:root {
    --babyBlue: blue;
}
div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: undefined;
}

这是我的 webpack（index.js 需要styles.js）：

const path …

我正在尝试为包含 tailwindcss v1 和 postcss-import 的 react-static 站点设置启动器。我无法通过构建或启动进程来解析 @import "tailwindcss/xxx" 指令。我用 tailwindcss v0.7.4 得到相同的结果

这就是我所做的......

1. react-static create选择basic选项
2. yarn add tailwindcss@next
3. yarn add postcss-import
4. yarn tailwind init
5. 添加 postcss.config.js
6. src/app.css用 3 个@import语句替换了内容

我尝试了许多选项，例如从其他现有项目开始，更改@import参数。例如"../tailwindcss，"src/tailwindcss，"../src/tailwindcss等

基本上我没有做任何改变错误，只是无法解析的文件名。

但是，还有 2 个可能相关的额外观察结果。首先，安装 tailwind 并npx tailwind build src/styles.css -o src/app.css从styles.css.

其次， postcss-import 根本没有发生 - 改变它对结果没有影响。

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: []
}

// postcss.config.js …

我创建了我的第一个 npm 包。我在npmjs上发布的，在项目中安装包并运行后，遇到了缺少'postcss-import'模块的错误。告诉我，问题可能出在哪里，在哪个文件中？我尝试了所有方法，但没有任何效果。也许这些文件有问题？

这是我的包的“package.json”文件

{
  "_from": "some_package",
  "_inBundle": false,
  "_integrity": "sha512-***",
  "_location": "/some_package",
  "_phantomChildren": {},
  "_requested": {
    "type": "tag",
    "registry": true,
    "raw": "some_package",
    "name": "some_package",
    "escapedName": "some_package",
    "rawSpec": "",
    "saveSpec": null,
    "fetchSpec": "latest"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/some_package/-/some_package-1.0.1.tgz",
  "_shasum": "***",
  "_spec": "some_package",
  "_where": "/home/user/vue/projects/package_name",
  "author": "",
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "bundleDependencies": false,
  "dependencies": {
    "vue": "^2.6.5",
    "vue-browser-detect-plugin": "^0.1.5",
    "vue-element-resize-event": "^0.1.0"
  },
  "deprecated": false,
  "description": "A Vue.js project",
  "devDependencies": { …

我需要从数据库中获取一些颜色值并在我的 CSS 中使用它们，以便每个客户都有我的 React.js 应用程序的颜色品牌版本，但我不确定如何操作。

我还有其他品牌元素，例如徽标、口号和术语，我从数据库中提取这些元素，存储为 JSON 文件，并在网站周围引用，效果很好，但问题是我需要使用的颜色在我的样式表中，因为我需要使用 CSS 提供的伪类。

我发现这个postcss-import-json包声称可以做到这一点，但我似乎无法让它按预期工作。

到目前为止我已经...

• 导入包... npm install --save-dev postcss-import-json

• 创建了一个名为“masterConfig.json”的 JSON 文件

• 使用我称之为颜色（主要）的名称将上述文件导入到我的主样式表中... :root { @import-json "../Assets/MasterConfig/masterConfig.json" (primary); }

• 将上面的颜色名称添加到我的颜色列表中... :root {primary: primary} 我也尝试过将--前缀更改为@import-json... (primary as primary prefix --)

• ...并将其添加到我的代码中要使用的位置... style={{background: "var(--primary)"}} ^^^ 带或不带前缀

难道我做错了什么？我注意到在示例中它使用了符号$，那么这只能与 SCSS 一起使用吗？

任何对此的帮助，或任何其他方式来实现这一点将是伟大的，谢谢！