From 4408211979597843b10e02c701644341cb50735b Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 31 Jul 2019 22:29:56 +0800 Subject: [PATCH 1/2] feat: allow configuring scss options separately from sass closes #4116 --- .../@vue/cli-service/__tests__/css.spec.js | 23 +++++++++++++++++++ packages/@vue/cli-service/lib/config/css.js | 15 ++++++++---- packages/@vue/cli-service/lib/options.js | 1 + 3 files changed, 35 insertions(+), 4 deletions(-) diff --git a/packages/@vue/cli-service/__tests__/css.spec.js b/packages/@vue/cli-service/__tests__/css.spec.js index 209b0aad8e..e087586511 100644 --- a/packages/@vue/cli-service/__tests__/css.spec.js +++ b/packages/@vue/cli-service/__tests__/css.spec.js @@ -198,6 +198,29 @@ test('css.loaderOptions', () => { expect(findOptions(config, 'sass', 'sass')).toMatchObject({ data, indentedSyntax: true, sourceMap: false }) }) +test('scss loaderOptions', () => { + const sassData = '$env: production' + const scssData = '$env: production;' + + const config = genConfig({ + vue: { + css: { + loaderOptions: { + sass: { + sassData + }, + scss: { + scssData + } + } + } + } + }) + + expect(findOptions(config, 'scss', 'sass')).toMatchObject({ scssData, sourceMap: false }) + expect(findOptions(config, 'sass', 'sass')).toMatchObject({ sassData, indentedSyntax: true, sourceMap: false }) +}) + test('should use dart sass implementation whenever possible', () => { const config = genConfig() expect(findOptions(config, 'scss', 'sass')).toMatchObject({ fiber: require('fibers'), implementation: require('sass') }) diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index 77ad2fa668..df55ce82f1 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -162,10 +162,17 @@ module.exports = (api, rootOptions) => { createCSSRule('css', /\.css$/) createCSSRule('postcss', /\.p(ost)?css$/) - createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign(defaultSassLoaderOptions, loaderOptions.sass)) - createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(defaultSassLoaderOptions, { - indentedSyntax: true - }, loaderOptions.sass)) + createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign( + defaultSassLoaderOptions, + loaderOptions.scss || loaderOptions.sass + )) + createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign( + defaultSassLoaderOptions, + { + indentedSyntax: true + }, + loaderOptions.sass + )) createCSSRule('less', /\.less$/, 'less-loader', loaderOptions.less) createCSSRule('stylus', /\.styl(us)?$/, 'stylus-loader', Object.assign({ preferPathResolver: 'webpack' diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js index 9719a239f7..e2de378e00 100644 --- a/packages/@vue/cli-service/lib/options.js +++ b/packages/@vue/cli-service/lib/options.js @@ -40,6 +40,7 @@ const schema = createSchema(joi => joi.object({ loaderOptions: joi.object({ css: joi.object(), sass: joi.object(), + scss: joi.object(), less: joi.object(), stylus: joi.object(), postcss: joi.object() From cf6c91c15449a55b11d510b151ddcd8169cfa807 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 31 Jul 2019 23:39:50 +0800 Subject: [PATCH 2/2] docs: mention the `scss` option in the documentation --- docs/config/README.md | 2 ++ docs/guide/css.md | 12 ++++++++++-- docs/zh/config/README.md | 2 ++ docs/zh/guide/css.md | 20 ++++++++++++++++++-- 4 files changed, 32 insertions(+), 4 deletions(-) diff --git a/docs/config/README.md b/docs/config/README.md index e34d0e496f..f0a7d08372 100644 --- a/docs/config/README.md +++ b/docs/config/README.md @@ -304,6 +304,8 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40 - [less-loader](https://github.com/webpack-contrib/less-loader) - [stylus-loader](https://github.com/shama/stylus-loader) + It's also possible to target `scss` syntax separately from `sass`, with the `scss` option. + See also: [Passing Options to Pre-Processor Loaders](../guide/css.md#passing-options-to-pre-processor-loaders) ::: tip diff --git a/docs/guide/css.md b/docs/guide/css.md index 5faaa4473c..83cf75e1d7 100644 --- a/docs/guide/css.md +++ b/docs/guide/css.md @@ -131,9 +131,17 @@ module.exports = { css: { loaderOptions: { // pass options to sass-loader + // @/ is an alias to src/ + // so this assumes you have a file named `src/variables.sass` sass: { - // @/ is an alias to src/ - // so this assumes you have a file named `src/variables.scss` + data: `@import "~@/variables.sass"` + }, + // by default the `sass` option will apply to both syntaxes + // because `scss` syntax is also processed by sass-loader underlyingly + // but when configuring the `data` option + // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none + // in that case, we can target the `scss` syntax separately using the `scss` option + scss: { data: `@import "~@/variables.scss";` }, // pass Less.js Options to less-loader diff --git a/docs/zh/config/README.md b/docs/zh/config/README.md index 74d500200e..539df1a814 100644 --- a/docs/zh/config/README.md +++ b/docs/zh/config/README.md @@ -292,6 +292,8 @@ module.exports = { - [less-loader](https://github.com/webpack-contrib/less-loader) - [stylus-loader](https://github.com/shama/stylus-loader) + 另外，也可以使用 `scss` 选项，针对 `scss` 语法进行单独配置（区别于 `sass` 语法）。 + 更多细节可查阅：[向预处理器 Loader 传递选项](../guide/css.html#向预处理器-loader-传递选项) ::: tip 提示 diff --git a/docs/zh/guide/css.md b/docs/zh/guide/css.md index 15349db665..aa8d562677 100644 --- a/docs/zh/guide/css.md +++ b/docs/zh/guide/css.md @@ -110,7 +110,7 @@ module.exports = { ## 向预处理器 Loader 传递选项 -有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 `vue.config.js` 中的 `css.loaderOptions` 选项。比如你可以这样向所有 Sass 样式传入共享的全局变量： +有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 `vue.config.js` 中的 `css.loaderOptions` 选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量： ``` js // vue.config.js @@ -120,8 +120,24 @@ module.exports = { // 给 sass-loader 传递选项 sass: { // @/ 是 src/ 的别名 - // 所以这里假设你有 `src/variables.scss` 这个文件 + // 所以这里假设你有 `src/variables.sass` 这个文件 + data: `@import "~@/variables.sass"` + }, + // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效 + // 因为 `scss` 语法在内部也是由 sass-loader 处理的 + // 但是在配置 `data` 选项的时候 + // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号 + // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置 + scss: { data: `@import "~@/variables.scss";` + }, + // 给 less-loader 传递 Less.js 相关选项 + less:{ + // http://lesscss.org/usage/#less-options-strict-units `Global Variables` + // `primary` is global variables fields name + globalVars: { + primary: '#fff' + } } } }