问题标签 [postcss-import]

我有以下文件夹结构

我vue-loader用来编译.vue文件。在 App.vue 中，我正在导入main.css文件（它导入多个其他 css 文件，例如规范化和一个简单的网格系统，使用 postcss-import）。

为了编译所有内容，我使用了具有以下配置的 Webpack 和 Webpack Dev Server：

这适用于除我的文件之外的每个imported.css文件。每当我修改并保存它时，Webpack (Dev Server) 都不会重新编译我的资产。我必须手动切换到我的main.css文件或任何.vue文件并保存该文件以重新编译。即使我保存imported.css文件，有什么方法可以重新编译资产？

我有一个variables.css包含 CSS 变量的文件:root{}

现在每次我需要在.css我使用的另一个文件中使用它时：

@import './path/to/variables.css'.

我想知道是否有一种方法variables.css可以在全球范围内使用，而无需每次需要时都导入它。

我尝试customProperties在cssnext插件上使用该选项，但将 css 编译为 js 对象时出错...
我正在使用Reactwithwebpack 1和 as postcss 插件，我有import、和.mixinscssnextnested

谢谢

嗨，我正在尝试在 Angular 项目中使用带有 grunt 的 postcss-import 和 postcss-cssnext。我在 main.css 中导入了一个 colors.css 文件。

在 gruntfile 中，我首先调用 postcss-import 插件，然后调用 postcss-cssnext。但是当我使用这两个插件时，导入不起作用。

无论如何，如果我只调用 postcss-import 它可以正常工作，在 main.css 中添加 colors.css。

我在故事书中创建一个简单的反应工具箱按钮故事时遇到问题。我想强调一点，我在应用程序中设置的所有 react-toolbox 都运行良好。适当postcss.config.js的文件如下所示：

我收到了这个错误，我不确定我的配置中缺少哪个加载程序。

看起来有问题，@import但为什么我的应用程序一切正常？有人在这里，可以帮助我解决这个问题吗？

感谢您的任何建议。

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

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

我正在尝试为在 webpack 和 PostCSS 上运行的应用程序加载 scss 样式表。

不幸的是，我收到以下错误

(Emitted value instead of an instance of Error) postcss-import: .../file.scss:2:1: Cannot find module 'compass' from '../scss'

我已经从 npm 安装了指南针。

这是我的 webpack 设置：

还有我的 PostCSS 配置

那么有什么建议可以帮助我吗？

这是我的 css webpack 配置

{ test: /\.css$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } }, { loader: 'postcss-loader', options: { sourceMap: true, // https://github.com/postcss/postcss-loader/issues/92 // https://github.com/postcss/postcss-loader/issues/8 plugins: () => [ precss(), postcssImport({ addDependencyTo: webpack }), postcssNested(), postcssCssnext({ browsers: ['last 2 versions', 'ie >= 9'], compress: true, }), ], }, }, ], }

而且我正在使用 Webpack 3，如果我触摸一个 @import 的 css 文件，热加载功能将不起作用，人们建议我将其放在postcssImport({ addDependencyTo: webpack })插件的第一行，但如果我放在 precss 之前，我得到了编译错误。

我想知道上述配置是否有任何问题，不胜感激。

您可以在此 repo 中重现该问题

https://github.com/iroy2000/react-redux-boilerplate。

我可以postcss-import用于导入 Bootstrap 吗？

这是我的 webpack 配置的一部分：

我正在尝试导入使用 npm 安装的 Bootstap：

我有一个错误：

我也url-loader用作默认加载程序

我正在使用webpack v.2.1.3、postcss-loader v.2.0.6、postcss-import v.11.0.0

我正在将 PostCSS http://cssnext.io/与我的 Next.js 网站结合使用butterCMS。我是 postcss 的新手，但喜欢他们正在尝试做的事情，但是来自 SASS 背景，我发现它似乎正在陷入困境，必须添加许多额外的模块和脚本才能使其正常工作这并没有给它比预处理器的主要优势。

在我的 package.json 中，我有以下模块：

在我的根目录中，我有一个./styles/包含以下文件的文件夹：

默认值.css

样式.css

在我的反应脚本中，我有：

只有composes指令与剩余的实用程序一起使用，并且我的 next.js 中的 index.js 文件没有选择样式。其余部分给我以下警告/错误：

或者

ETC

我缺少关于 postcss 的任何信息吗？

就最终产品的性能/速度而言，并根据最佳实践 - Normalize.css 应该作为单独的文件保存（从 HTML 头链接）还是将其编译到最终的 .css 文件中更好？

我在这里和许多其他网站上搜索，但找不到答案。希望你能理解我的困境：

1. 将 normalize.css 留在 node-modules 文件夹中，并从我们的 html 链接到它。 我对编码还很陌生，但是如果我对这种方法的理解正确，除了我们的 main.css 文件之外，我们还会向服务器添加一个（可能是不必要的）请求吗？它对网站的性能/加载时间有多糟糕或有多大的负担？

<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css"> <link rel="stylesheet" href="temp/styles/styles.css">

另一方面，我们可以：

2. 使用 'postcss-import' 将 normalize.css 与其他模块一起导入，并将它们一起编译成一个最终的 .css 文件。

好的，现在我们把所有东西都放在了一个地方，但是我们刚刚在我们实际的 css 的第一行之前添加了 451 行代码（和注释）。就可读性而言，它对我来说似乎不是最好的解决方案，但现在网站加载速度会更快吗？

免责声明：到目前为止，我一直在使用第二种方法，但我开始问自己这是否是最佳解决方案。

先感谢您。