构建系统

The Meteor build system is the actual command line tool that you get when you install Meteor. You run it by typing the meteor command in your terminal, possibly followed by a set of arguments. Read the docs about the command line tool or type meteor help in your terminal to learn about all of the commands.流星的构建系统是命令行工具在安装流星后就能使用。你可以通过在终端中键入meteor来运行它，当然需要有一组跟随的参数。请阅读关于命令行工具的文档或者键入meteor help在你的终端中来学习所有的命令。

What does it do?它干了些什么？

The Meteor build tool is what compiles, runs, deploys, and publishes all of your Meteor apps and packages. It's Meteor's built-in solution to the problems also solved by tools like Grunt, Gulp, Webpack, Browserify, Nodemon, and many others, and uses many popular Node.js tools like Babel and UglifyJS internally to enable a seamless experience.流星的构建工具可以编译，运行，部署，以及发布你的流星应用和包。这是流星内置的工具用来解决由Grunt, Gulp, Webpack, Browserify, Nodemon和其它种种工具解决的问题，并且使用了Node.js中很多流行的工具，如Babel和UglifyJS在内部提供了良好的构建体验。

Reloads app on file change在文件变化时重新装载应用

When you run meteor, the tool starts up, and you should leave it running continuously while developing your app. The tool automatically detects any relevant file changes and recompiles the necessary changes, restarting your client or server environment if needed.当你运行meteor时，工具开始启动，你应该让它持续运行，一边当你开发应用。工具会自动侦测任何相关的文件变化并且重新进行必要的编译，重启你的客户端或服务器环境，如果需要的话。

Compiles files with build plugins通过构建插件编译文件

The main function of the Meteor build tool is to run "build plugins" - these plugins define different parts of your app build process. Meteor puts heavy emphasis on reducing or removing build configuration files, so you won't see any large build process config files like you would in Gulp or Webpack. The Meteor build process is configured almost entirely through adding and removing packages to your app, and putting files in specially named directories. For example, to get all of the newest stable ES2015 JavaScript features in your app, you just add the ecmascript package. As new Meteor releases add new features to this package, you'll get them for free.流星构建工具的主要功能是运行“构建插件”—这些插件定义了应用构建流程的不同部分。流星强调减少或移除构建配置文件，所以你不会看到Gulp或Webpack中的大量的构建过程配置文件。流星构建配置流程几乎完全是通过添加和移除包和放置文件在特殊命名的文件夹中来完成的。例如，在你的应用中要获得所有最新的稳定的ES2015 JavaScript功能，你只需要添加ecmascript包。由于流星新的release添加了新的功能到这个包，你就可以免费的获得他们。

Combines and minifies code合并和缩减代码

Another important feature of the Meteor build tool is that it automatically concatenates and minifies all of your files in production mode. This is enabled by the standard-minifiers package, which is in all Meteor apps by default. If you need different minification behavior, you can replace this package. Below, we'll talk about how to switch out your minifier to add PostCSS to your build process.另一个流星构建工具重要的功能是它会自动链接和缩减你的文件，当然是在生产模式中。这是通过standard-minifiers包来完成的，这个包在所有的流星应用中是默认具有的。如果你需要不同的缩减行为，你可以替换这个包。下面我们将讨论关于如何切换你的缩减器，这是通过添加PostCSS到你的构建流程来完成的。

Development vs. production开发对比生产

Running an app in development is all about fast iteration time. All kinds of different parts of your app are handled differently and instrumented to enable better reloads and debugging. In production, the app is reduced to just the necessary code, and functions like a regular Node.js app. Therefore, you shouldn't run your app in production by running the meteor command. Instead, follow the directions in the production deployment article.在开发中运行一个应用就是快速迭代的时间。你的应用的不同部分被分别处理并且进行组合来获得更好的重新装载和调试。在生产环境中，应用应该被减少到仅为必要的代码，并且函数就像一个常规的Node.js应用。因此，你不应该通过运行meteor命令在生产环境中来运行你的应用。取而代之，应遵守在生产环境部署一章的指示。

Using community packages使用社区包

Building an application completely from scratch is a tall order. This is one of the main reasons you might consider using Meteor in the first place - you can focus on writing the code that is specific to your app, instead of reinventing wheels like user login and data synchronization. To streamline your workflow even further, it makes sense to use community packages from Atmosphere and NPM. Many of these packages are recommended in the guide, and you can find more in the online directories.白手起家构建一个完整的应用是一项耗时的工作。这也是你考虑使用流星的一个很重的原因—你可以专注于撰写哪些特定与你的应用的代码，而不是重新发明轮子，如，用户登录和数据同步。要进一步提高你的工作流程的效率，从Atmosphere和NPM中使用社区包是一种好的选择。在本指南中很多这类的包被推荐，并且你可以在线上找到更多。

Atmosphere

Atmosphere is a repository and discovery website for Meteor-specific packages. Packages are published on Atmosphere when they need to take advantage of features specific to Meteor, like the cross-platform build system, isomorphic client/server code, or data system.Atmosphere是一个仓库和发现的站点，其为流星特定的包而设立。在Atmosphere上发布的包是具有流星的特定功能的，如跨平台的构建系统，isomorphic 客户端／服务器端代码，或者数据系统。

Adding packages to your app向你的应用添加包

You have two options for adding packages from Atmosphere to your app:从Atmosphere向你的应用添加包，你有两个选项：

  1. Use the command line: meteor add kadira:flow-router.使用命令行：meteor add kadira:flow-router。
  2. Edit the file in your app under .meteor/packages, and add the package name anywhere in the file.编辑位于你的应用.meteor/packages下的文件，并且在该文件里添加包的名字。

These options will add the newest version of the desired package that is compatible with the other packages in your app. If you want to specify a particular version, you can specify it by adding a suffix to the package name, like so: meteor add kadira:[email protected].这些选项都是添加你想要添加的包的兼容于其余包的最新版本。如果你想要制定一个特殊的版本，可以通过添加包名的后缀，如：meteor add kadira:[email protected]。

Regardless of how you add the package to your app, its actual version will be tracked in the file at .meteor/versions. This means that anybody collaborating with you on the same app is guaranteed to have the same package versions as you. If you want to update to a newer version of a package after installing it, use meteor update. You can run meteor update without any arguments to update all packages and Meteor itself to their latest versions, or pass a specific package to update just that one, for example meteor update kadira:flow-router.不论你如何添加包到你的应用，真实的版本是在.meteor/versions文件中进行跟踪的。也就是说任何和你一起协作在同一个应用上的人都会具有和你一样的包版本。如果你想要更新新的包版本在安装了它之后，使用meteor update。你可以运行meteor update不带任何参数来更新所有的包和流星自身到他们的最新版本，或者通过传递一个特定的包来只更新那一个，例如meteor update kadira:flow-router。

If your app is running when you add a new package, Meteor will automatically download it and restart your app for you.如果在添加包的时候你的应用正在运行，流星会自动地下载包并且为你重启应用。

Searching for packages搜索包

There are a few ways to search for Meteor packages published to Atmosphere:有几种方式可以用来搜索发布到Atmonphere的流星包：

  1. Search on the Atmosphere website.在Atmosphere网站上进行搜索。
  2. Use meteor search from the command line.在命令行中使用meteor search
  3. Use a community package search website like Fastosphere.使用社区包搜索网站，如Fastosphere。

The main Atmosphere website provides additional curation features like trending packages, package stars, and flags, but some of the other options can be faster if you're trying to find a specific package. For example, you can use meteor show kadira:flow-router from the command line to see the description of that package and different available versions.Atmosphere站点主要提供如包的趋势，包的星级，以及标志等有组织的功能，是用来让你更快的能够找到某个特定的包。例如，你可以在命令行使用meteor show kadira:flow-router来产看包的描述和不同的可用版本。

Package naming包的命名

You may notice that, with the exception of Meteor platform packages, all packages on Atmosphere have a name of the form `prefix:name`. The prefix is the name of the organization or user that published the package. Meteor uses such a convention of package naming to make sure that it's clear who has published a certain package, and to avoid an ad-hoc namespacing convention. Meteor platform packages do not have any `prefix:`.你可能注意到流星平台的包有些不同，所有的在Atmosphere包都是`前缀:名称`的形式。前缀是组织或作者的名字。流星使用这样的包命名来确保能够很容易知道是谁发布某个特定的包，并且为了防止随意的名称空间。流星平台的包不具有任何的`前缀:`。

Overriding packages from Atmosphere with a local version用本地版本覆写Atmosphere的包

A Meteor app can load packages in one of three ways, and it looks for a matching package name in the following order:流星应用有三种方式进行包的装载，它是以以下顺序来查找符合的包的名称的：

  1. Package source code in the packages/ directory inside your app.在应用中，packages/下的包的源代码目录。
  2. Package source code in directories indicated by setting a PACKAGE_DIRS environment variable before running any meteor command. You can add multiple directories by separating the paths with a : on OSX or Linux, or a ; on Windows. For example: PACKAGE_DIRS=../first/directory:../second/directory, or on Windows: set PACKAGE_DIRS=..\first\directory;..\second\directory.在运行任何的meteor命令之前，通过设置PACKAGE_DIRS环境变量来指定包的源代码在这些目录下。你可以添加多个目录，在OSx或Linux上通过:进行分割，在Windows下则使用;。例如PACKAGE_DIRS=../first/directory:../second/directory,而在Windows上：set PACKAGE_DIRS=..\first\directory;..\second\directory。
  3. Pre-built package from Atmosphere. The package is cached in ~/.meteor/packages on Mac/Linux or %LOCALAPPDATA%\.meteor\packages on Windows, and only loaded into your app as it is built.内置的从Atmosphere上而来的包。包会在~/.meteor/packages（Mac/Linux）或%LOCALAPPDATA%\.meteor\packages（Windows）被缓存，并且只对你的应用进行装载因为它是内置的。

If you need to patch a package to do something that the published version doesn't do, then you can use (1) or (2) to override the version from Atmosphere. You can even do this to load patched versions of Meteor core packages - just copy the code of the package from Meteor's GitHub repository, and edit away.如果你需要对于某个已经发布的版本的包进行补丁，那么你可以使用（1）或（2）来覆写从Atmosphere的版本。你甚至可以通过这种方式来装载流星的核心包的补丁版本—只需要将流星的GitHub仓库中的代码拷贝到相应的包中。

One difference between pre-published packages and local app packages is that the published packages have any binary dependencies pre-built. This should only affect a small subset of packages. If you clone the source code into your app, you need to make sure you have any compilers required by that package.预－发布的包和本地应用包的一个不同之处在于已经发布了的包具有任意二进制前置依赖项。这应该只会影响一小部分的包。如果你将源代码克隆到你的应用程序，你需要确保可以具有任意的该包所需要的编译器。

NPM

NPM is the most popular package repository for JavaScript packages. Historically, NPM was only used for publishing server-side Node.js packages, but is now used for a much wider variety of packages, including client/server JavaScript utilities, React components, Angular directives, and more.NPM是JavaScript包的最流星的仓库。历史上而言，NPM只是用来发布服务器端的Node.js包，但是现在被用来作为更多类型的包，包括客户／服务器JavaScript的工具，React组件，Angular的directives，以及更多。

Adding packages to your app将包添加到你的应用里

Meteor 1.3 will have seamless integration with NPM, and you will be able to simply npm install these packages into your app directory. Until then, the easiest way to use NPM packages in your app is meteorhacks:npm.流星的1.3版本会无缝衔接NPM，且你将可以简单地通过npm install来安装这些包到你的应用的目录。在此执勤啊，最容易地使用NPM包的方式是meteorhacks:npm。

Searching for packages搜索包

The best way to find NPM packages is by searching on npmjs.com. There are also some websites that have special search features specifically for certain kinds of packages, like the aptly named react-components.com.最好的找到NPM包的方式是通过搜索npmjs.com。也有些站点具有可以根据功能来搜索特定的包，像react-components.com。

Handling NPM callbacks处理NPM的回调

Many NPM packages rely on an asynchronous, callback or promise-based coding style. For several reasons, Meteor is currently built around a synchronous-looking but still non-blocking style using Fibers.很多NPM包依赖于异步，回调或基于promise的代码风格。由于多种原因，流星现在内置使用一种看上去是同步的风格但却是非阻塞的风格，通过使用Fibers。

The global Meteor server context and every method and publication initialize a new fiber so that they can run concurrently. Many Meteor APIs, for example collections, rely on running inside a fiber. They also rely on an internal Meteor mechanism that tracks server "environment" state, like the currently executing method. This means you need to initialize your own fiber and environment to use asynchronous Node code inside a Meteor app. Let's look at an example of some code that won't work, using the code example from the node-github repository:全局流星服务器的上下文和每个方法以及发布都会初始化一个新的fiber来让它们并发运行。很多流星的APIs，例如集合，依赖内部运行的一个fiber。它们也依赖于内部流星跟踪服务器“环境”状态的机制，像当前执行的方法。这意味着你需要初始化你自己的fiber和环境，用来在流星应用中使用异步的Node代码。让我们看一个不工作的代码的例子，使用的代码来自于node-github repository：

// Inside a Meteor method definition
updateGitHubFollowers() {
  github.user.getFollowingFromUser({
    user: 'stubailo'
  }, (err, res) => {
    // Using a collection here will throw an error
    // because the asynchronous code is not in a fiber
    Followers.insert(res);
  });
}

Let's look at a few ways to resolve this issue.让我们一起看一下解决这个问题的几种方式：

选项1: Meteor.bindEnvironment

In most cases, simply wrapping the callback in Meteor.bindEnvironment will do the trick. This function both wraps the callback in a fiber, and does some work to maintain Meteor's server-side environment tracking. Here's the same code with Meteor.bindEnvironment:多数情况下，只需简单地将回调包裹在Meteor.bindEnvironment就可以解决这个问题。该方法将回调包裹在一个fiber里，并且做了一些维护流星服务器端环境变量跟踪的工作。这里是使用Meteor.bindEnvironment的代码

// Inside a Meteor method definition
updateGitHubFollowers() {
  github.user.getFollowingFromUser({
    user: 'stubailo'
  }, Meteor.bindEnvironment((err, res) => {
    // Everything is good now
    Followers.insert(res);
  }));
}

However, this won't work in all cases - since the code runs asynchronously, we can't use anything we got from an API in the method return value. We need a different approach that will convert the async API to a synchronous-looking one that will allow us to return a value.然而这并不会在所有情况下都工作—由于代码是异步运行的，我们不能使用任何从该方法返回的值。我们需要一个不同的方式来转换异步的API到一个同步风格的，可以允许我们返回值。

选项2: Meteor.wrapAsync

Many NPM packages adopt the convention of taking a callback that accepts (err, res) arguments. If your asynchronous function fits this description, like the one above, you can use Meteor.wrapAsync to convert to a fiberized API that uses return values and exceptions instead of callbacks, like so:很多的NPM包适应的回调参数是 (err, res) 。如果你的异步方法符合该描述，如上所示，你可以使用Meteor.wrapAsync来转换一个fiber过的要使用返回值和异常而不是回调的API。

// Setup sync API
const getFollowingFromUser =
  Meteor.wrapAsync(github.user.getFollowingFromUser, github.user);

// Inside a Meteor method definition
updateGitHubFollowers() {
  const result = getFollowingFromUser({
    user: 'stubailo'
  });

  Followers.insert(result);

  // Return how many followers we have
  return result.length;
}

If you wanted to refactor this and create a completely fiber-wrapper GitHub client, you could write some logic to loop over all of the methods available and call Meteor.wrapAsync on them, creating a new object with the same shape but with a more Meteor-compatible API.如果你想要重构并且创立一个完全地Github客户端包装器，你可以写一些逻辑来遍历所有的可用的方法并且为它们调用Meteor.wrapAsync，创建一个新的，具有相通形式的蛋可以更兼容于流星的API。

选项3: Promises

Recently, a lot of NPM packages have been moving to Promises instead of callbacks for their API. This means you actually get a return value from the asynchronous function, but it's just an empty shell where the real value is filled in later. If you are using a package that has a promise-based API, you can convert it to synchronous-looking code very easily.最近，很多NPM的包都转移到Promises而不是回调用来取代它们的API。这就是说实际上你获得的返回值来自于异步的函数，但它只是一个空壳，而真正的值会稍后填充。如果你使用一个包，而其具有基于－promise的API，你可以很容易地将它转换到同步－风格的代码。

First, add the Meteor promise package:首先添加流星的promise包：

meteor add promise

Now, you can use Promise.await to get a return value from a promise-returning function. For example, here is how you could send a text message using the Node Twilio API:现在，你可以使用Promise.await来获得一个从一个promise-返回的函数而来的返回值。例如，这里是通过使用Node Twilio API，你如何发送一个文本消息的示例：

sendTextMessage() {
  const promise = client.sendMessage({
    to:'+16515556677',
    from: '+14506667788',
    body: 'Hello world!'
  });

  // Wait for and return the result
  return Promise.await(promise);
}

NPM on the client客户端的NPM

NPM started as a package manager for Node.js, but is quickly becoming one of the most popular places to publish client-side modules as well. Meteor 1.3 will include built-in support for bundling NPM modules on the client, but in the meantime the best option is to use the cosmos:browserify package to bundle these modules. Since one of the most common scenarios is using React components from NPM, read about how to do this in the React in Meteor guide.NPM开始时只是一个Node.js的包管理器，但很快也发展为最流行的地方用来发布客户端的模块。流星1.3将会包括内置支持绑定NPM模块到客户端，但此刻最好的选择是使用 cosmos:browserify包来绑定这些模块。既然最常用的一个场景是从NPM中使用React组件，请阅读React in Meteor guide。

JavaScript transpiration

These days, the landscape of JavaScript tools and frameworks is constantly shifting, and the language itself is evolving just as rapidly. It's no longer reasonable to wait for web browsers to implement the language features you want to use. Most JavaScript development workflows rely on compiling code to work on the lowest common denominator of environments, while letting you use the newest features in development. Meteor has support for some of the most popular tools out of the box.JavaScript工具和框架正在不断地进化，并且语言自身也发展迅速。要等待web浏览器来实现你想要的语言特征变得不现实。多数JavaScript开发工作流依赖于编译代码工作在最低通用的环境之上。流星已经支持一些最流行的即用工具。

ES2015+ (推荐)

ECMAScript, the language standard on which every browser's JavaScript implementation is based, has moved to yearly standards releases. The newest complete standard is ES2015, which includes some long-awaited and very significant improvements to the JavaScript language. Meteor's ecmascript package compiles this standard down to regular JavaScript that all browsers can understand using the popular Babel compiler. It's fully backwards compatible to "regular" JavaScript, so you don't have to use any new features if you don't want to. Additionally, as browser support for these features improves, we'll be able to scale back the amount of compilation necessary.ECMAScript，该语言标准是基于每个浏览器的JavaScript的实现，已经开始每年进行标准发布。最新的完整的标准是ES2015，包括一些长期－等待和非常重大的对于JavaScript语言的改进。流星的 ecmascript 包编译该标准到常规的、所有的浏览器都能理解的JavaScript，通过使用流行的 Babel 编译器。这是完全向前兼容到“常规的”JavaScript，所以你不需要使用任何新的功能，如果你不想的话。额外地，作为浏览器支持这些特征改进，我们可以todo

The ecmascript package is included in all new apps and packages by default, and compiles all files with the .js file extension automatically. See the list of all ES2015 features supported by the ecmascript package.ecmascript包已经包含在所有的新应用和包里，默认地，并且自动地编译所有的文件后缀名为.js的文件。参见list of all ES2015 features supported by the ecmascript package。

To get the full experience, you should also use the es5-shim package which is included in all new apps by default. This means you can rely on runtime features like Array#forEach without worrying about which browsers support them.要获得完整的体验，你也可以使用es5-shim包，在所有的新应用中默认被包括。就是说你可以依赖运行时的像Array#forEach那样的功能，而不需要担心哪个浏览器支持它们。

All of the code samples in this guide and future Meteor tutorials will use all of the new ES2015 features, so we won't add any new code samples here. You can also read more about ES2015 and how to get started with it on the Meteor Blog:

CoffeeScript

While we recommend using ES2015 with the ecmascript package as the best development experience for Meteor, everything in the platform is 100% compatible with CoffeeScript and many people in the Meteor community prefer it.

All you need to do to use CoffeeScript is add the right package:

meteor add coffeescript

All code written in CoffeeScript compiles to JavaScript under the hood, and is completely compatible with any code in other packages that is written in JS or ES2015.

Templates and HTML

Since Meteor uses client-side rendering for your app's UI, all of your HTML code, UI components, and templates need to be compiled to JavaScript. There are a few options at your disposal to write your UI code.

Blaze HTML templates

The aptly named blaze-html-templates package that comes with every new Meteor app by default compiles your .html files written using Spacebars into Blaze-compatible JavaScript code. You can also add blaze-html-templates to any of your packages to compile template files located in the package.

Read about how to use Blaze and Spacebars in the Blaze article.

Blaze Jade templates

If you don't like the Spacebars syntax Meteor uses by default and want something more concise, you can give Jade a try by using dalgard:jade. This package will compile all files in your app with the .jade extension into Blaze-compatible code, and can be used side-by-side with blaze-html-templates if you want to have some of your code in Spacebars and some in Jade.

JSX for React

If you're building your app's UI with React, currently the most popular way to write your UI components involves JSX, an extension to JavaScript that allows you to type HTML tags that are converted to React DOM elements. To enable JSX compilation, simply add the jsx package to your app; you can also use the react meta-package which will include jsx for you.

Other options for React

If you want to use React but don't want to deal with JSX and prefer a more HTML-like syntax, there are a few community options available. One that stands out in particular is Blaze-React, which simulates the entire Blaze API using React as a rendering engine.

Angular templates

If you would like to write your UI in Angular, you will need to switch out Meteor's Blaze template compiler which comes by default with the Angular one. Read about how to do this in the Angular-Meteor tutorial.

CSS 预处理器

It's no secret that writing raw CSS can often be a hassle - there's no way to share common CSS code between different selectors or have a consistent color scheme between different elements. CSS compilers or pre-processors solve these issues by adding extra features on top of the CSS language like variables, mixins, math, and more, and in some cases also significantly change the syntax of CSS to be easier to read and write.撰写原生的CSS是个麻烦已经不是什么秘密了—由于没有办法在不同的选择器之间共享通用的CSS代码，或者是在不同的元素之间共享一致的色彩架构。CSS编译器或预处理器通过在CSS语言之上添加额外的功能—如变量，mixins，math，以及更多来解决这些问题，并且在一些情况下尤其明显地是改变CSS的语法能够让CSS很容易被读写。

Sass, Less, 还是 Stylus?

There are three CSS pre-processors that are particularly popular right now:现在有三种CSS预处理器尤其流行：

  1. Sass
  2. Less.js
  3. Stylus

They all have their pros and cons, and different people have different preferences, just like with JavaScript transpired languages. The most popular one at the time of writing seems to be Sass with the SCSS syntax. Popular CSS frameworks like Bootstrap 4 and more are switching to Sass, and the C++ LibSass implementation appears to be faster than some of the other compilers available.它们都有各自的优缺点，并且不同的人有不同的喜好，就像对待JavaScript结果证实语言一样的。现在最流行的一个是看来是SCSS语法的Sass。流行的CSS框架像Bootstrap 4 和其它更多都切换到了Sass，并且C++库写成的Sass实现显得比其余的编译器更快。

CSS framework compatibility should be a primary concern when picking a pre-processor, because a framework written with Less won't be compatible with one written in Sass.CSS框架的兼容性应该是一个主要的考量在选择预编译器的时候，因为一个由Less写成的框架是不会和一个由Sass写成的框架兼容的。

Source vs. import files源代码vs.倒入文件

An important feature shared by all of the available CSS pre-processors is the ability to import files. This lets you split your CSS into smaller pieces, and provides a lot of the same benefits that you get from JavaScript modules:一个所有的可用的CSS预编译器的重要的特征是能够导入文件。可以让你将CSS分割成小片断，并且提供很多和JavaScript模块一样的好处。

  1. You can control the load order of files by encoding dependencies through imports, since the load order of CSS matters.你可以控制文件装载的顺序，这是通过导入编码依赖来实现的，由于装载顺序对于CSS而言非常重要。
  2. You can create reusable CSS "modules" that just have variables and mixins, and don't actually generate any CSS.你可以创建重用的CSS“模块”只有变量和mixins，并且不需要实际上产生任何的CSS。

In Meteor, each of your .scss, .less, or .styl source files will be one of two types: "source", or "import”.在流星中，每个你的.scss，.less,.styl的源代码文件会是“源代码”或“导入”的其中一种。

A "source" file is evaluated eagerly, and adds its compiled form to the CSS of the app immediately.一个“源代码”文件会在添加的时候立即进行编译。

An "import" file is evaluated only if imported from some other file, and can be used to share common mixins and variables between different CSS files in your app.一个“导入”文件则仅仅在导入其它文件时进行评估，并且能够通用的mixins和变量在不同的CSS文件之间进行共享。

Read the documentation for each package listed below to see how to indicate which files are source files vs. imports.

Importing from a package从包中进行导入

In all three Meteor-supported CSS pre-processors, you can import files from packages using a special syntax:

@import "{my-package:pretty-buttons}/buttons/styles.import.less"

You can also import files with an absolute path in the app by using {} instead of a package name:

@import "{}/client/styles/imports/colors.less"

Read the documentation for your favorite CSS pre-processor package to learn more about the details.

Sass

The best Sass build plugin for Meteor is fourseven:scss.

Less

Less is maintained as a Meteor core package called less.

Stylus

Stylus is maintained as a Meteor core package called stylus.

PostCSS and Autoprefixer

In addition to CSS pre-processors like Sass, Less, and Stylus, there is now an ecosystem of CSS post-processors. Regardless of which CSS pre-processor you use, a post-processor can give you additional benefits like cross-browser compatibility.

The most popular CSS post-processor right now is PostCSS, which supports a variety of plugins. Autoprefixer is perhaps the most useful plugin, since it enables you to stop worrying about browser prefixes and compatibility and write standards-compliant CSS. No more copying 5 different statements every time you want a CSS gradient - you can just write a standard gradient without any prefixes and Autoprefixer handles it for you.

Currently, Meteor doesn't have a separate build step for post-processing CSS, so the only way to integrate it is to build it into the minifier. Thankfully, there is a community package that has integrated PostCSS with plugin support into a replacement for Meteor's standard minification package.

juliancwirko:postcss

Use the package juliancwirko:postcss to your app to enable PostCSS for your Meteor app. It's not completely trivial to set it up, and we hope to make support for PostCSS a more core part of Meteor in the future. Read the documentation for the package to get the steps to add it to your app; we won't reproduce the instructions here since they might change in future versions.

Minification

The current best practice for deploying web production applications is to concatenate and minify all of your app assets. This lets you add all of the comments and whitespace you want to your source code, and split it into as many files as is necessary without worrying about app performance.

Every Meteor app comes with production minification by default with the standard-minifiers package. This minifier goes to some extra effort to do a good job - for example, Meteor automatically splits up your files if they get too big to maintain support for older versions of Internet Explorer which had a limit on the number of CSS rules per file.

Minification usually happens when you meteor deploy or meteor build your app. If you have an error in production that you suspect is related to minification, you can run the minified version of your app locally with meteor --production.