Importing global constants in single file components - css

Question

I have these two global constants in #/assets/styles/constants.css
#value headerColor: #4f4f6f;
#value brightRed: #e74c3c;
In a Vue template one value works, the other doesn't
<style lang="scss" scoped>
#value headerColor, brightRed from '#/assets/styles/constants.css';
.header {
color: var(--headerColor); # this works
}
.button {
background-color: var(--brightRed); # this doesn't work
}
</style>
Interestingly, I import headerColor in another component in the same way and it doesn't work. Am I missing something?
This is my package.json
{
"name": "MyApp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"core-js": "^2.6.5",
"jquery": "^3.4.1",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-plugin-unit-jest": "^3.11.0",
"#vue/cli-service": "^3.11.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.6.10"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"/node_modules/"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
],
"testURL": "http://localhost/",
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
}
}

Answer 1

Just ensure you are using postcss and the postcss-modules-values plugin and then configure your Webpack like below:
colors.css
#value blue: #0c77f8;
#value red: #ff0000;
#value green: #aaf200;
demo.css
/* import your colors... */
#value colors: "./colors.css";
#value blue, red, green from colors;
.button {
color: blue;
display: inline-block;
}
Example webpack.config for postcss-modules-values
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var values = require('postcss-modules-values');
module.exports = {
entry: ['./src/index'],
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'public'),
publicPath: '/public/'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') }
]
},
postcss: [
values
],
plugins: [
new ExtractTextPlugin('style.css', { allChunks: true })
]
};